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> ); } }
Try FormLabel instead of ControlLabel.
<ControlLabel>
is from an older version of react-bootstrap. The current version ("react-bootstrap": "^1.4.3") uses <FormLabel>
or <Form.Label>
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