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
JavaScript
x
24
24
1
import React from 'react'
2
import { Navbar, Nav, Container, Row } from 'react-bootstrap'
3
4
function Header() {
5
return (
6
<header>
7
<Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
8
<Container>
9
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
10
<Navbar.Toggle aria-controls="basic-navbar-nav" />
11
<Navbar.Collapse id="basic-navbar-nav">
12
<Nav className="mr-auto">
13
<Nav.Link href="#home">Home</Nav.Link>
14
<Nav.Link href="#link">Link</Nav.Link>
15
</Nav>
16
</Container>
17
</Navbar.Collapse>
18
</Navbar>
19
</header>
20
)
21
}
22
23
export default Header
24
Full error
JavaScript
1
10
10
1
Expected corresponding JSX closing tag for <Navbar.Collapse> (16:12)
2
3
14 | <Nav.Link href="#link">Link</Nav.Link>
4
15 | </Nav>
5
> 16 | </Container>
6
| ^
7
17 | </Navbar.Collapse>
8
18 | </Navbar>
9
19 | </header>
10
Advertisement
Answer
the </Navbar.Collapse>
needs to be before the </container>
tag