CODEWITHSUNDEEP
reactjsreact-bootstrap
Woodchuck
Woodchuck

Reputation: 4414

react-bootstrap form getting "Row is not defined" error

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.

Upvotes: 3

Views: 7393

Answers (1)

SelvaS
SelvaS

Reputation: 2125

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.

Upvotes: 7

Related Questions