'ControlLabel' is not exported from 'react-bootstrap'

Question

Hello I'm creating a login form in react, to check the login parameters use Checkbel of the package, but when I run the code I'm thrown this exception: ./src/App.js Attempted import error: 'ControlLabel' is not exported from 'react-bootstrap'. how do I solve?

React Code:

import React, { Component } from "react";
import { Form,Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import "./Login.css";
import Bootstrap from "react-bootstrap";

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: ""
    };
  }

  validateForm() {
    return this.state.email.length > 0 && this.state.password.length > 0;
  }

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

  handleSubmit = event => {
    event.preventDefault();
  }

  render() {
    return (
      <div className="Login">
        <form onSubmit={this.handleSubmit}>
          <FormGroup controlId="email" bsSize="large">
            <ControlLabel>Email</ControlLabel>
            <FormControl
              autoFocus
              type="email"
              value={this.state.email}
              onChange={this.handleChange}
            />
          </FormGroup>
          <FormGroup controlId="password" bsSize="large">
            <ControlLabel>Password</ControlLabel>
            <FormControl
              value={this.state.password}
              onChange={this.handleChange}
              type="password"
            />
          </FormGroup>
          <Button
            block
            bsSize="large"
            disabled={!this.validateForm()}
            type="submit"
          >
            Login
          </Button>
        </form>
      </div>
    );
  }
}

What is the version of your react-bootstrap, those components don't exist in 0.28. — Kunal, Jan 30 '19 at 10:56
Try `FormLabel` instead of `ControlLabel' -- that's the new name for latest versions of react bootstrap. — mtyson, Dec 13 '19 at 20:48
@mtyson Your comment could be an accepted answer. The accepted answer didn't work for me. — Jan Jansz, Feb 07 '20 at 20:51

score 40 · Accepted Answer · answered Mar 13 '19 at 21:28

40

Try FormLabel instead of ControlLabel.

answered Mar 13 '19 at 21:28

Yibin

426
4
3

This is the best approach! – Edgar Henriquez Jan 14 '21 at 15:58

score 10 · Answer 2 · answered Feb 04 '21 at 22:02

10

<ControlLabel> is from an older version of react-bootstrap. The current version ("react-bootstrap": "^1.4.3") uses <FormLabel> or <Form.Label>

answered Feb 04 '21 at 22:02

Danielle

101
1
3

score 9 · Answer 3 · answered Jan 31 '19 at 06:10

According to this url https://react-bootstrap.github.io/components/buttons/#button-props and your version you should modify your code like this.

    import React, { Component } from "react";
    import Form from 'react-bootstrap/Form'
    import Button from 'react-bootstrap/Button'
    import Bootstrap from "react-bootstrap";

    export default class Login extends Component {
      constructor(props) {
        super(props);

        this.state = {
          email: "",
          password: ""
        };
      }

      validateForm() {
        return this.state.email.length > 0 && this.state.password.length > 0;
      }

      handleChange = event => {
        this.setState({
          [event.target.id]: event.target.value
        });
      }

      handleSubmit = event => {
        event.preventDefault();
      }

      render() {
        return (
          <div className="Login">
            <Form onSubmit={this.handleSubmit}>
              <Form.Group controlId="email" bsSize="large">
                <Form.Control
                  autoFocus
                  type="email"
                  value={this.state.email}
                  onChange={this.handleChange}
                />
              </Form.Group>
              <Form.Group controlId="password" bsSize="large">
                <Form.Control
                  value={this.state.password}
                  onChange={this.handleChange}
                  type="password"
                />
              </Form.Group>
              <Button
                block
                bsSize="large"
                disabled={!this.validateForm()}
                type="submit"
              >
                Login
              </Button>
            </Form>
          </div>
        );
      }
    }

score 7 · Answer 4 · answered Feb 06 '20 at 17:58

7

This "react-bootstrap": "^1.0.0-beta.16", doesn't contain the ControlLabel, so uninstall it using

   npm uninstall react-bootstrap

and then re install with this "react-bootstrap": "^0.32.4" version

   npm install react-bootstrap@0.32.4 --save

will definitely fix this issue

answered Feb 06 '20 at 17:58

Asgar Ali Khachay

522
4
7

then you have remove ^ from package.json so that when deployment it will install the latest version – Asgar Ali Khachay Feb 09 '20 at 15:46

'ControlLabel' is not exported from 'react-bootstrap'

4 Answers4