Error: 'Form' is not defined react/jsx-no-undef in React

Dung Do Tien Jan 23 2021 566

I create a simple component form with Reactjs but I got an error: 'Form' is not defined react/jsx-no-undef

Below is my Login.js file:

import React, { Component } from 'react';
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";

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

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

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

  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}
            />
          </Form.Group>
          <Form.Group controlId="password" bsSize="large">
            <Form.Control
              value={this.state.password}
              type="password"
            />
          </Form.Group>
          <Button
            block
            bsSize="large"
            disabled={!this.validateForm()}
            type="submit"
          >
            Login
              </Button>
        </Form>
      </div>
    );
  }
}

export default Login;

Thank you many for any solution.

Have 1 answer(s) found.
  • B

    Blue Jame Jan 23 2021

    You need to add more Form object by:

    Change line code

    import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";

    To

    import {Form, Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
    
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close