e.target is null, when i'm using setState

Question

I want to change my state, the user properties, when the you change the field on the form I want it to change the proper value on user.

My element that I'm passing the function to, is to handle the value and fill the state in the parent component.

Ex: user type password. I want the user object to keep the same, but the user has to change.

state = {
      signUp: true,
      user:{
        name: '',
        password: '',
        email: '',
        userName: ''
      }
    }

handleChange = e =>{        
    this.setState(prevState => ({
      user: {
        ...prevState.user,
       [e.target.name] : e.target.value
      }
    } 

    ));
  }



 export default function SignupForm({handleSignup, handleChange}) {
    return (
        <div>
            <div className='login-page__main__cadastro'>


            <h4>
                 Cadastre-se para ver<span className='br'><br></br></span> fotos e vídeos dos seus <span className='br'><br></br></span> amigos.
                 </h4> 

                 <form className='login-page__main__cadastro__form'>
                  <input className='form-cadastro-item' onChange={handleChange} name='email' type='email' placeholder='email'></input>
                  <input className='form-cadastro-item' onChange={handleChange} name='name' type='text' placeholder='Nome completo'></input>
                  <input className='form-cadastro-item' onChange={handleChange} name='userName' type='text' placeholder='Nome de usuário'></input>
                  <input className='form-cadastro-item' onChange={handleChange} name='password' type='password' placeholder='Senha'></input>

                 <button onClick={handleSignup} className='btn-primary'>
                 Cadastrar-se

                 </button>

                 </form>
            </div>
        </div>
    )
}

I'm getting an error: e.target is null.

Can you update your code to show that where you are adding that handle change listner — Nipun Jain, Jan 18 '20 at 18:17
Does this answer your question? [What is event pooling in react?](https://stackoverflow.com/questions/36114196/what-is-event-pooling-in-react) — Emile Bergeron, Jan 18 '20 at 18:43

Ismael Padilla · Accepted Answer · 2020-01-18T18:41:20.913

You should either save the value to another variable, or use e.persist():

handleChange = e =>{    
    let myName = e.target.name;
    let myValue = e.target.value;    
    this.setState(prevState => ({
        user: {
            ...prevState.user,
            [myName] : myValue
        }
    })); 
}

This is because in React uses synthetic events for performance reasons. From the event pooling section of the docs:

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

I forgot to save the event target's name to a variable as well. Try it now? — Ismael Padilla, Jan 18 '20 at 18:41

e.target is null, when i'm using setState

1 Answers1