Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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>     );   } } 
like image 589
riki Avatar asked Jan 30 '19 10:01

riki


2 Answers

Try FormLabel instead of ControlLabel.

like image 108
Yibin Avatar answered Sep 20 '22 06:09

Yibin


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

like image 27
Danielle Avatar answered Sep 20 '22 06:09

Danielle