Navbar dropdowns stop working when added a modal

Question

Here I am facing a strange issue after calling a modal form, the navbar dropdowns stop working.

Any clue?

here is the link to my code: https://codesandbox.io/s/great-stonebraker-hfcln?fontsize=14&hidenavigation=1&theme=dark

To reproduce the issue: from Navbar go to Master data > customers > the modal form will open > close the modal form > then go back to the menu and they to open the master data drop down.

Ashwin R · Answer 1 · 2020-11-08T20:47:43.257

0

Use react router's Link to navigate:

import { Link } from "react-router-dom";

In MainNav component:

<Link to="/customers">
  <NavDropdown.Item >Customers</NavDropdown.Item>
</Link>

https://codesandbox.io/s/eloquent-bash-tkhn8?file=/src/mainnav.jsx

Href redirects the page to a particular location(Page redirects, state of the app is lost). Link from react-router-dom allows you to navigate to different routes with the page loading retaining state of your react app (internal routing).

edited Nov 08 '20 at 20:47

answered Nov 07 '20 at 14:29

Ashwin R

744
7
14

Could you please elaborate the why? – HichemSeeSharp Nov 07 '20 at 17:11
I agree on your statement but a the same time we are rendering two links because I see this Warning: validateDOMNesting(...): cannot appear as a descendant of . – HichemSeeSharp Nov 07 '20 at 18:47
1

Your explanation actually helped me get to the right solution so thanks. – HichemSeeSharp Nov 08 '20 at 10:09

score 0 · Answer 2 · answered Nov 08 '20 at 10:07

0

I found the solution,
Basically we need to convert the Navbar.Item to Link that's how you can avoid nesting to anchors. My code look like this now: <NavDropdown.Item as={Link} to="/customers">Customers</NavDropdown.Item>

answered Nov 08 '20 at 10:07

HichemSeeSharp

3,240
2
22
44

Navbar dropdowns stop working when added a modal

2 Answers2