title: ReactJS - How to save the inputted value to a state using React Bootstrap
body: <p>I created a form using React-Bootstrap but I am having a problem in it, the problem is I can't save the value to my state</p>
  <p>Here's my code</p>
  <pre><code>const StudentsForm = (props) =&gt; {
  
      const initialFormState = { firstName: '', lastName: ''}
  
      const [students, setStudents] = useState(initialFormState)
  
      const handleInputChange = (event) =&gt; {
          const { name, value } = event.target
  
          setStudents({ ...students, [name]: value })
  
      }  
  
      const submit = () =&gt; {
          console.log('Values are', students)
      }  
       
      return (
           &lt;Form onSubmit={submit}&gt;
             &lt;Form.Row&gt;
                      &lt;Form.Group as={Col}&gt;
                          &lt;Form.Label&gt;First Name&lt;/Form.Label&gt;
                          &lt;Form.Control type=&quot;text&quot; placeholder=&quot;Enter First Name&quot; value={students.firstName} onChange={handleInputChange}/&gt;
                      &lt;/Form.Group&gt;
  
                      &lt;Form.Group as={Col}&gt;
                          &lt;Form.Label&gt;Last Name&lt;/Form.Label&gt;
                          &lt;Form.Control type=&quot;text&quot; placeholder=&quot;Enter Last Name&quot; value={students.lastName} onChange={handleInputChange} /&gt;
                      &lt;/Form.Group&gt;
                  &lt;/Form.Row&gt;
  
                  &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot;&gt;
                      Submit
                  &lt;/Button&gt;
           &lt;/Form&gt;
   
          )
  }
  
  export default StudentsForm
  </code></pre>
  <p>And also whenever I add value in <code>&lt;Form.Control /&gt;</code> I can't even type on it.</p>
  <p>Expected output is values should be saved to a state and when I click submit button values that are inputted in the text field should be logged in the console.</p>