title: Passing functions in ReactJS as props for components
body: <p>I am a beginner to using ReactJS and I created a component like this:</p>
  <pre><code>function InputField(props){
      return &lt;div&gt;
          &lt;label htmlFor={props.Id}&gt;{props.label}&lt;/label&gt;
          &lt;input type={props.type} id={props.Id} value={props.value} 
          onChange={props.changeFunc} /&gt;
      &lt;/div&gt;
  }
  </code></pre>
  <p>After rendering the component I wasn't able to enter text inside the input box. The state was not being updated for the hook I had created.</p>
  <p>You can imagine that I have passed props to the component something like this</p>
  <pre><code>&lt;InputField Id='user_email' label='Email' type='email' 
  value={values.email} changeFunc={handleChange}/&gt;
  </code></pre>
  <p>And my implementation of handleChange function</p>
  <pre><code>const handleChange = (event)=&gt;{
          const {name,value} = event.target
          setValues((prevValues)=&gt;{
              return {...prevValues,[name]:value}
          })
  }
  </code></pre>
  <p><strong>Update</strong>: Thank you everyone for pointing out that I had missed to add the name property to the input field.</p>