3

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.

2
  • Row is a prop for the component. You should pass Row as a prop.
    – SelvaS
    Commented Jun 11, 2019 at 16:47
  • Actually Row is a component from bootstrap.
    – SelvaS
    Commented Jun 11, 2019 at 16:50

1 Answer 1

7

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.

2
  • 1
    Wow, that works. Thanks! I don't see that in their documentation. It mentions importing Form ("import Form from 'react-bootstrap/Form'). But I guess Col, Row, etc., need to be imported separately.
    – Woodchuck
    Commented Jun 11, 2019 at 17:02
  • 1
    They have exported the Form, Row, Col, etc in github.com/react-bootstrap/react-bootstrap/blob/master/src/… But I dont know why the documentation is not updated.
    – SelvaS
    Commented Jun 11, 2019 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.