I am facing an issue with react , it worked with individual usestates but when I made it as an object it failed , and this is the code :

import React, { useState } from 'react'
import {Link} from "react-router-dom"
import {DatabaseNetworkPoint} from '@icon-park/react';
import axios from "axios"

export default function Register() {

    const [user, setUser] = useState({
        username:"",
        email:"",
        password:"",
        age:0,
        gender:"",
    })
    const [file, setFile] = useState(null)

  


    const handleChange = (event) => {
        console.log(event.target.value)
        setUser({
            username:event.target.value,
        email:event.target.value,
        password:event.target.value,
        age:event.target.value,
        gender:event.target.value,
        img:event.target.files[0]
        })

        setFile(event.target.files[0])
    
    }
      

    const handleSubmit = (event) => {
        event.preventDefault()
        console.log('button clicked', event.target)
      }

  
  return (
    <div className='container'>
      <div className='left'>
       <div className='logo'>
       <DatabaseNetworkPoint theme="outline" size="150" fill="#333"/>
        <h1>WonderHit</h1>
       </div>
          <form className='form' onSubmit={handleSubmit}>
          <input placeholder='Username' value={user.username} className='field' type="text" onChange={handleChange} />
          <input placeholder='Email' value={user.email} className='field' type="email" onChange={handleChange} />
          <input placeholder='Password' value={user.password} className='field' type="password" onChange={handleChange} />
          <input placeholder='Age' value={user.age} className='field' name='age' type="number" onChange={handleChange} />
          <input placeholder='Gender' value={user.gender} className='field' name='gender' type="text" onChange={handleChange} />
          <div className='profilePic'>
            <div className='Photo'></div>
            <input className='field2' id='file' type="file" onChange={handleChange} />
            <label htmlFor = "file"  className='uploadPic' > </label>
          </div>
          <button className='submit' type="submit">Register</button>
          <h3 className='routing'>You already have an account ? <Link className='rot' to="/">Login</Link></h3>
        </form>
      </div>
      <img className='right' src='https://images.unsplash.com/photo-1562577309-4932fdd64cd1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80' />
    </div>
  )
}

and this is the error Iam getting :

Uncaught TypeError: Cannot read properties of null (reading '0') what might be the problem ?? is it the file thats causing me issues ? should I handle it as string ??????

CodePudding user response：

img:event.target.files[0] You're calling handleChange for every <input>, whether it's a file type or not.

CodePudding user response：

Use a different handler, don't use the same handler(handleChange) for every input change, the issue is coming because of another field change file type input returning null.

Use another handler for the upload file and set it to use of useState and use it for a later use case.

CodePudding user response：

Maybe you can add a check to your handleChange(event)'s event, and make a conditional setting to your user state. Also remember using new object when setting user state, because you would like to save the other input's state in your user

  const handleChange = (event) => {
        if(event.target.placeholder === 'Username'){
          //