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.
You should import Row, Col and Form from react-bootstrap. Refer this MDN link for more about JavaScript imports.
import React from "react";
import ReactDOM from "react-dom";
import { Col, Row, Form } from "react-bootstrap";
function App() {
return (
<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>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here is the working link.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With