I'm using react-bootstrap in my React project and following their documented examples to create a form. If I understand correctly, I only need to import form
to get all the Form functionality:
import Form from 'react-bootstrap/Form'
Specifically, I'm following this pretty simple example:
<Form>
<Form.Group as={Row} controlId="formPlaintextEmail">
<Form.Label column sm="2">
Email
</Form.Label>
<Col sm="10">
<Form.Control plaintext readOnly defaultValue="[email protected]" />
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formPlaintextPassword">
<Form.Label column sm="2">
Password
</Form.Label>
<Col sm="10">
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
</Form>
However, I get the following error in Chrome DevTools:
MyComponent.jsx:430 Uncaught ReferenceError: Row is not defined
I tried importing row, but that doesn't resolve the error. Any ideas what's missing?
Seems to me either their documented example is incomplete or broken, or there's some additional import I need to add to use react-bootstrap.
Update 2022: I updated the above link to the example, which had changed. Interestingly, the examples still only mentions importing Form (import Form from 'react-bootstrap/Form') and leave out the surprising need to also import Row and Col.
Row
is a prop for the component. You should passRow
as a prop.Row
is a component from bootstrap.