React-Bootstrap menus do not show the current selection

Question

For example, in the next image, the menu selected was about, the address string shows it, but the menu tab is still showing home

I am a newbie with Bootstrap

The code is this:

import React, { useState } from 'react';

import { Nav, NavDropdown } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

export default function NavSample() {
    const [key, setKey] = useState('home');

    const handleSelect = (key) => {
        setKey(key);
    };

    return (
        <Nav variant="pills" activeKey="home" onSelect={handleSelect} defaultActiveKey="home">
            <Nav.Item>
                <Nav.Link eventKey="home" href="/home">
                    Home
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="about" href="/about" title="about">
                    About
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="contact" href="/contact">Contact</Nav.Link>
            </Nav.Item>
            <NavDropdown title="Pricing" id="nav-dropdown">
                <NavDropdown.Item eventKey="Basic pricing" href="/pricing/basic pricing">Basic</NavDropdown.Item>
                <NavDropdown.Item eventKey="Corporate Pricing" href="/pricing/corporate pricing">Corporates</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item eventKey="Enterprise Pricing" href="/pricing/enterprise pricing">Enterprise</NavDropdown.Item>
            </NavDropdown>
        </Nav>
    );
}

What am I missing?

Rafael

you probably need to tie the `activeKey` in `
` to your `key` in state. — tromgy, Sep 03 '21 at 20:09
Hi tromgy, I did it, simply wrote eventKey={key}, and it is worst now, all tabs are now selected :( — Rafael, Sep 03 '21 at 20:15
no, it should be `activeKey` in `
`, and NOT `eventKey` in ``, but you've got another problem -- having those hrefs changing the route causes it reset the state every time. So even if you do set `activeKey`, the key will instantly get reset to "home" because the whole page gets reloaded. — tromgy, Sep 03 '21 at 20:50

score 1 · Accepted Answer · answered Sep 03 '21 at 21:32

So to deal with state resets you need to use React router for your routes instead of just hrefs

You need to install react-router-dom and react-router-bootstrap packages as well.

Here's a working example:

import 'bootstrap/dist/css/bootstrap.min.css';

import React, { useState } from 'react';
import { Nav, NavDropdown } from 'react-bootstrap';
import { BrowserRouter as Router } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';

export default function NavTabs({ active_key }) {
  const [key, setKey] = useState(active_key);

  const handleSelect = (key) => {
    console.log(`selected ${key}`);
    setKey(key);
  };

  console.log(`Rendering with ${key}`);
  return (
    <Router>
      <Nav variant="pills" activeKey={key} onSelect={handleSelect}>
        <LinkContainer to="/home">
          <Nav.Link eventKey="home">Home</Nav.Link>
        </LinkContainer>
        <LinkContainer to="/about">
          <Nav.Link eventKey="about" title="about">
            About
          </Nav.Link>
        </LinkContainer>
        <LinkContainer to="/contacts">
          <Nav.Link eventKey="contact">Contact</Nav.Link>
        </LinkContainer>
        <NavDropdown title="Pricing" id="nav-dropdown">
          <NavDropdown.Item eventKey="Basic pricing" href="/pricing/basic pricing">
            Basic
          </NavDropdown.Item>
          <NavDropdown.Item eventKey="Corporate Pricing" href="/pricing/corporate pricing">
            Corporates
          </NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item eventKey="Enterprise Pricing" href="/pricing/enterprise pricing">
            Enterprise
          </NavDropdown.Item>
        </NavDropdown>
      </Nav>
    </Router>
  );
}

and when you use this component (e.g. from <App>), supply the starting tab:

function App() {
  return (<NavTabs active_key="home"/>)
}

React-Bootstrap menus do not show the current selection

1 Answers1