How can I grab the value of an input form?

[m-ret]

I am attempting to grab the value of an input form on React Bootstrap but the obvious way doesn't seem to be working.

This is the form field component:

const FormField = ({
  type,
  label,
  value,
  onChange,
  controlId,
  placeholder,
}) => (
  <Form.Group as={Row} controlId={controlId}>
    <Form.Label column sm={4}>
      {label}
    </Form.Label>
    <Col sm={8}>
      <Form.Control
        type={type}
        value={value}
        onChange={() => onChange(value)}
        placeholder={placeholder}
      />
    </Col>
  </Form.Group>
);

And here is the parent where I call that component above:

class FormFieldsGroup extends Component {
  state = {
    firstName: '',
  };

  render() { 
   const { firstName } = this.state;
   return (
        <FormField
          type="text"
          label="First Name"
          controlId="firstName"
          placeholder="First Name"
          value={firstName}
          onChange={firstName => this.setState({ firstName })}
        />
   )
  }
}

It only returns an empty string.

What can I do to store the value of that input in a local component state?

Really, guys, this is very important and should be in the docs. Like any kind of specification on how to grab the value of an input form properly. I came from this post #2418 where there is still people trying to figure out how to do this in the best way possible.

[taion]

That's not the "normal" way and that's not how controlled inputs in React work. See https://reactjs.org/docs/forms.html. The form controls work as transparent pass-throughs to the underlying <input>s in these contexts, and take props as normal.

In your example, you're passing back the value prop that you're passing in, rather than the event target value.

[m-ret]

Yeah. I am getting the value of the inputs with event.target, as normal. I just thought there was a React Bootstrap way. Anyways, thanks for your time, @taion.

[ORESoftware]

I have the same problem: #4987