how to manage active state in bootstrap navbar in react? [duplicate]

Question

I know that the active class has to be managed manually in bootstrap. I have done that a few times with jQuery.

My newest project works with react though.

I know that I am not supposed to set classes in the dom with jQuery when using react. But how would this be done correctly?

Answer 1

You simply have to specify the active value of the tabs in your render function. To know whether or not a tab should have a value for the the className property is to store it somewhere.

How do you store something in a react component? You use state. You haven't shown any code but you could simply keep track of which tab is currently active in your state.

You could for example have this:

getInitialState: function() {
    return { activeTabClassName: "tab1" };
}

render: function() {
    return (
        <ul>
            <li className={(this.state.activeTabClassName === "tab1") ? "active" : ""}></li>
            <li className={(this.state.activeTabClassName === "tab2") ? "active" : ""}></li>className            </ul>
    );
}

Warning: This code block is just one example and isn't tested. (There are several ways to do it).

You could also check this: Switch class on tabs with React.js

Answer 2

You could use react-router to automatically or manually manage active state in bootstrap navbar.