title: How to dynamically update the value for any input field with one event handler function, using hooks
body: <p><strong>TL;DR</strong> </p>
  
  <blockquote>
    <p>Is there any way to dynamically update the value for input fields with one event
    handler function like we could do with stateful component.</p>
  </blockquote>
  
  <p>I am working on a login form with 2 fields. Email and Password. When i am using 2 useState representing the two field, then when i update the state with handleChange both state get updated. Which is not the intention.</p>
  
  <pre><code>   const [email, setEmail] = useState()
     const [password, setPassword] = useState()
  
      const handleChange = e =&gt; {
          const {value} = e.target
          setEmail(value)
          setPassword(value)
      }
  </code></pre>
  
  <p>I don't want to use multiple event handler for handling each input field. I tried this </p>
  
  <pre><code>    const [state , setState] = useState({
          email : "",
          password : ""
      })
  
      const handleChange = e =&gt; {
          const {name , value} = e.target
          setState({
              [name] : value
          })
      }
  </code></pre>
  
  <p>But this updates one property at a time. And the other property value get lost. So is there any way that i can update all my input fields with one event handler function like we could do with stateful component.</p>
  
  <pre><code>    this.state = {
        email : "",
        password : ""
      }
  
      const handleChange = e =&gt; {
          const {name , value} = e.target
          this.setState({
             [name] : value
          })
      }
  </code></pre>