React Bootstrap get value from form on submit

Question

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?

export default function SpouseForm() {
  const dispatch = useContext(DispatchContext);

  return (
    <Form>
      <Row>
        <Col xs={12} md={12} lg={{ span: 6, offset: 3 }}>
          <InputGroup className="mb-3">
            <InputGroup.Prepend>
              <InputGroup.Text>Age</InputGroup.Text>
            </InputGroup.Prepend>
            <FormControl /> <--------- I want to get this value on submit /////////////////
      </InputGroup>
        </Col>
      </Row>
      <Row>
        <Col xs={12} md={12} lg={{ span: 6, offset: 3 }}>
          <Button
            onClick={(e) => {
              e.preventDefault()
              dispatch({ type: "SPOUSE_AGE", spouseAge: e.target.value }); < ----- tried to get it here, not working
              router.push('/children')
            }}
            style={{ width: '100%' }}
            type="submit"
            variant="outline-primary"
            size="lg" >Next</Button>{' '}
        </Col>
      </Row>
    </Form>
  )
}

Answer 1

It's either you have controlled input and keep track of its value real-time stored within your state:

const { useState } = React,
      { render } = ReactDOM,
      { Form , Button } = ReactBootstrap,
      rootNode = document.getElementById('root')

const App = () => {
  const [value, setValue] = useState(),
        onInput = ({target:{value}}) => setValue(value),
        onFormSubmit = e => {
          e.preventDefault()
          console.log(value)
          setValue()
        }
  
  return (
    <Form onSubmit={onFormSubmit}>
      <Form.Control 
        type="text" 
        onChange={onInput} 
        value={value}
      />
      <Button type="submit">
        Submit
      </Button>
    </Form>
  )
}

render (
  <App />,
  rootNode
)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script><div id="root"></div>

The other way around is to have uncontrolled inputs and access FormData upon submit:

const { useState } = React,
      { render } = ReactDOM,
      { Form , Button } = ReactBootstrap,
      rootNode = document.getElementById('root')

const App = () => {
  const onFormSubmit = e => {
          e.preventDefault()
          const formData = new FormData(e.target),
                formDataObj = Object.fromEntries(formData.entries())
          console.log(formDataObj)
        }
  
  return (
    <Form onSubmit={onFormSubmit}>
      <Form.Control type="text" name="myInput" />
      <Button type="submit">
        Submit
      </Button>
    </Form>
  )
}

render (
  <App />,
  rootNode
)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script><div id="root"></div>