Expected corresponding JSX closing tag for (16:12)

So I get Expected corresponding JSX closing tag for <Navbar.Collapse> (16:12) error, It says there is no closing tag for <Navbar.Collapse> but there is, here is my code

import React from 'react'
import { Navbar, Nav, Container, Row } from 'react-bootstrap'

function Header() {
    return (
            <header>
                <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
            <Container>
                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#link">Link</Nav.Link>
                </Nav>
            </Container>
                </Navbar.Collapse>
                </Navbar>
            </header>
    )
}

export default Header

Full error

Expected corresponding JSX closing tag for <Navbar.Collapse> (16:12)

  14 |                     <Nav.Link href="#link">Link</Nav.Link>
  15 |                 </Nav>
> 16 |             </Container>
     |             ^
  17 |                 </Navbar.Collapse>
  18 |                 </Navbar>
  19 |             </header>

Answer

the </Navbar.Collapse> needs to be before the </container> tag

Advertisement

Answer