title: How can I get a value from a React-Bootstrap form on submit?
body: <p>I am trying to get the value of a form input using React-Bootstrap. What is the standard procedure to get the form value from a react bootstrap form on a functional component in react?</p>
  <pre><code>export default function SpouseForm() {
    const dispatch = useContext(DispatchContext);
  
    return (
      &lt;Form&gt;
        &lt;Row&gt;
          &lt;Col xs={12} md={12} lg={{ span: 6, offset: 3 }}&gt;
            &lt;InputGroup className=&quot;mb-3&quot;&gt;
              &lt;InputGroup.Prepend&gt;
                &lt;InputGroup.Text&gt;Age&lt;/InputGroup.Text&gt;
              &lt;/InputGroup.Prepend&gt;
              &lt;FormControl /&gt; &lt;--------- I want to get this value on submit /////////////////
        &lt;/InputGroup&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
        &lt;Row&gt;
          &lt;Col xs={12} md={12} lg={{ span: 6, offset: 3 }}&gt;
            &lt;Button
              onClick={(e) =&gt; {
                e.preventDefault()
                dispatch({ type: &quot;SPOUSE_AGE&quot;, spouseAge: e.target.value }); &lt; ----- tried to get it here, not working
                router.push('/children')
              }}
              style={{ width: '100%' }}
              type=&quot;submit&quot;
              variant=&quot;outline-primary&quot;
              size=&quot;lg&quot; &gt;Next&lt;/Button&gt;{' '}
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Form&gt;
    )
  }
  </code></pre>