ReactJS Error: react/jsx-no-undef by react-bootstrap

user_8235303 0
Viewed 10276

I want to use menu bar in my project. First, I choose it from React-bootstrap but program has show an error about 'react/jsx-no-undef'.

This is code from React-bootstrap website.

const navbarInstance = (
<Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrap</a>
      </Navbar.Brand>
    </Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">Link</NavItem>
      <NavItem eventKey={2} href="#">Link</NavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>Action</MenuItem>
        <MenuItem eventKey={3.2}>Another action</MenuItem>
        <MenuItem eventKey={3.3}>Something else here</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated link</MenuItem>
      </NavDropdown>
    </Nav>
  </Navbar>
);
ReactDOM.render(navbarInstance, mountNode);
react-bootstrap reactjs javascript
1 Answers

For me works that:

Import ReactBoostrap and all their components using Destructuring: 

import ReactBootstrap, {Jumbotron, Button, Col, Grid, Panel, FormGroup} from 'react-bootstrap'

Using: 

class HelloWorld extends Component {

    render() {
        return (
            <div className="container">
            <Jumbotron>
                <p>Bootstrap is workings? </p>
                <div className="my-class-from-react">
                    <h1>Hello World from React.js</h1>
                </div>
            </Jumbotron>
            </div>
        )
    }
}

export default HelloWorld;
user_23592180
Related