How to manage active state in bootstrap navbar?

Question

I know that the active class must be managed manually in bootstrap. I have done this several times with jQuery.

My newest project works with reaction.

I know that I should not set classes in dom with jQuery when using reaction. But how will this be done right?

Answer 1

You just need to specify the active value for the tabs in your render function. To know if a tab should have a value for the className property, it's to store it somewhere.

How do you store something in a react component? You are using state . You have not provided any code, but you can simply keep track of which tab is active in your state.

You can, for example, have the following:

 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 is just one example and has not been verified. (There are several ways to do this).

You can also check this out: Tabbed Switch Class Using React.js

Answer 2

You can use react-router to automatically or manually control the active state in the bootstrap navigator.