title: Is there a different method to setState with e.target.value in functional component react using hooks?
body: <p>I am very new to react and have been learning it through tutorials. Now, since react has been promoting functional components using hooks, I have been trying to convert the tutorial's Class-based method to the new react syntax of functional components.  Everything in the following code worked out fine, except for when I try to set the state of AddNinja component to the input value.</p>
  
  <p>Following are three components - the master component(works fine), the display component(works fine), and the problem component.  There is also the original version of the problem component as taught in the tutorial using classes and that works fine. Only my version of the problem component(AddNinja) doesn't work.</p>
  
  <p>this is the master component(works fine):</p>
  
  <pre><code>
  import React, { useState } from 'react';
  import Ninjas from './Ninjas';
  import AddNinja from './AddNinja';
  
  function App() {
    const [ninjas, setNinja] = useState([
      { name: 'Ryu', age: 34, belt: 'blackbelt', id: 1 },
      { name: 'Yuu', age: 32, belt: 'yellowbelt', id: 2 },
      { name: 'Lee', age: 31, belt: 'redbelt', id: 3 },
      { name: 'Shawn', age: 34, belt: 'blackbelt', id: 4 },
      { name: 'Mario', age: 34, belt: 'blackbelt', id: 5 },
      { name: 'Rhea', age: 34, belt: 'blackbelt', id: 6 },
  
  
    ])
  
    const addNinja = (ninja) =&gt; {
      ninja.id = Math.random() * 10;
      let addedNinjas = setNinja([...ninjas, ninja]);
      return addedNinjas;
  
    }
  
    const deleteNinja = id =&gt; {
      let remainingNinjas = ninjas.filter(ninja =&gt; ninja.id !== id);
      console.log(remainingNinjas);
      let newArray = setNinja([...remainingNinjas]);
      return newArray
  
    }
  
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;My first React App&lt;/h1&gt;
        &lt;p&gt;Welcome&lt;/p&gt;
        &lt;Ninjas deleteNinja={deleteNinja} ninjas={ninjas} /&gt;
        &lt;AddNinja addNinja={addNinja} /&gt;
  
      &lt;/div&gt;
    )
  
  
  }
  
  export default App;
  </code></pre>
  
  <p>this is the display component(in case you need to run the code)(works fine)</p>
  
  <pre><code>import React from 'react';
  
  const Ninjas = ({ninjas, deleteNinja}) =&gt; {
  
      const ninjaList = ninjas.map(ninja =&gt; {
          return ninja.age &gt; 31 ? (
              &lt;div className='ninja' key={ninja.id}&gt;
                  &lt;div&gt;Name: {ninja.name}&lt;/div&gt;
                  &lt;div&gt;Age: {ninja.age}&lt;/div&gt;
                  &lt;div&gt;Belt: {ninja.belt}&lt;/div&gt;
                  &lt;button onClick={() =&gt; {deleteNinja(ninja.id)} }&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
          ) : null
      });
      return (
          &lt;div className='ninja-list'&gt;
              {ninjaList}
          &lt;/div&gt;
      )
  
  
  }
  
  export default Ninjas;
  </code></pre>
  
  <p>And this is the problem component.. Everything in it turned out fine while converting class-based to functional using hooks except for the handleSubmit function. While typing the input, it logs the values fine, but then returns all values except the last one(belt) as undefined on submit. It's like it forgets the other values.  </p>
  
  <pre><code>import React, { useState } from 'react';
  
  const AddNinja = ({ addNinja }) =&gt; {
      const [newNinjas, setNewNinja] = useState(
          {
              name: null,
              age: null,
              belt: null
          }
      );
  
      const handleChange = e =&gt; {
  
          setNewNinja({
              [e.target.id]: e.target.value
          });
      }
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
          console.log('submit', newNinjas.age, newNinjas.belt)
          addNinja(newNinjas);
          // document.querySelector('form').reset();
      }
  
      return (
          &lt;div&gt;
              &lt;form onSubmit={handleSubmit}&gt;
                  &lt;label htmlFor="name"&gt;Name:&lt;/label&gt;
                  &lt;input type="text" id="name" onChange={handleChange} /&gt;
                  &lt;label htmlFor="age"&gt;Age:&lt;/label&gt;
                  &lt;input type="text" id="age" onChange={handleChange} /&gt;
                  &lt;label htmlFor="belt"&gt;Belt:&lt;/label&gt;
                  &lt;input type="text" id="belt" onChange={handleChange} /&gt;
                  &lt;button&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      )
  
  }
  
  export default AddNinja;
  </code></pre>
  
  <p>What am I doing wrong?  Am I supposed to use useEffects here?  If yes, can you please show me how to do it in the code?</p>
  
  <p>Also, in case you want to take a look at the original class-based component as taught by the tutor, which works completely fine, by the way, here it is:(works fine)</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class AddNinja extends Component{
      state = {
          name: null,
          age: null,
          belt: null
      }
      handleChange = e =&gt; {
          this.setState({
              [e.target.id]: e.target.value
          });
          // console.log(this.state)
      }
      handleSubmit = e =&gt; {
          e.preventDefault();
          // console.log(this.state);
          this.props.addNinja(this.state);
          document.querySelector('form').reset();
      }
      render(){
          return (
              &lt;div&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;
                      &lt;label htmlFor="name"&gt;Name:&lt;/label&gt;
                      &lt;input type="text" id="name" onChange={this.handleChange}/&gt;
                      &lt;label htmlFor="name"&gt;Age:&lt;/label&gt;
                      &lt;input type="text" id="age" onChange={this.handleChange}/&gt;
                      &lt;label htmlFor="name"&gt;Belt:&lt;/label&gt;
                      &lt;input type="text" id="belt" onChange={this.handleChange}/&gt;
                      &lt;button&gt;Submit&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default AddNinja;
  </code></pre>
  
  <p>Thank you so much for reading!  </p>