Navigation bar with active Tab without additional modules - reactjs

Question

The question is rather simple and is not specifically connected to navigation bars, it's just a good example..
I want to create simple navigation bar with active tab highlighting by using 'active' class. Currently I have two components: NavBar and NavItem. On tab click, I would like to make it active and make sure all others become inactive.
What would be the easiest solution to this? How to reset multiple NavItems inside NavBar to default inactive state without one that was clicked?
NavBar.js
import React from 'react';
import NavItem from './NavItem';
export default class NavBar extends React.Component {
constructor() {
super();
this.menuItems = [
{ name: 'HOME', url: '#' },
{ name: 'NEWS', url: '#' },
{ name: 'CONTACT', url: '#' }
];
}
render() {
return (
<nav>
<ul>
CHOOSE:
{this.menuItems.map( (item,i) => <NavItem key={i} data={item} /> )}
</ul>
</nav>
);
}
}
NavItem.js
import React from 'react';
export default class NavItem extends React.Component {
constructor() {
super();
this.state = {
active: false
}
}
handleOnClick() {
this.setState({active: !this.state.active});
}
render() {
let item = this.props.data;
return <li><a href={item.url} className={this.state.active ? 'active' : ''} onClick={ (e) => this.handleOnClick(e) }>{item.name}</a></li>;
}
}

Answer 1

I don't see benefit of putting list item in a different component. In fact you would end up setting active class on 1 list item due to each item is a separate component.
Simplest thing could be to put list in the same component and pass an index in click function.
{this.menuItems.map((item,i) => <li><a href={item.url} className={this.state.activeItem == i ? 'active' : ''} onClick = {(e) => this.handleOnClick(e,i) }>{item.name}</a></li> )}
now click function would look something like -
handleOnClick = (event, index) => {
this.setState({activeItem: index});
}
So your component would look like
import React from 'react';
import NavItem from './NavItem';
export default class NavBar extends React.Component {
constructor() {
super();
this.menuItems = [
{
name: 'HOME',
url: '#'
}, {
name: 'NEWS',
url: '#'
}, {
name: 'CONTACT',
url: '#'
}
];
this.state = {
activeItem: 0
}
}
handleOnClick = (event, index) => {
this.setState({activeItem: index});
}
render() {
return (
<nav>
<ul>
CHOOSE: {this
.menuItems
.map((item, i) => <li>
<a
href={item.url}
className={this.state.activeItem == i
? 'active'
: ''}
onClick=
{(e) => this.handleOnClick(e,i) }>{item.name}</a>
</li>)}
</ul>
</nav>
);
}
}
I've setup item at 0 index default active but you could change it according to the needs.

Answer 2

Looks like the React Docs article, Lifting State Up , has been written exactly to the use-case you have been demonstrated.
You are managing the isActive state inside each component in isolation. Each Instance of NavItem can't know, and should not know, what is the state of the other instances of NavItem
So ... lift your state up! Manage the information about active/inactive bars, inside Navbar, and control your multiple NavItem instances through props.
It should look like this:
NavBar.js
import React from 'react';
import NavItem from './NavItem';
export default class NavBar extends React.Component {
constructor() {
super();
this.state = {
menuItems: [
{ name: 'HOME', url: '#', isActive: true },
{ name: 'NEWS', url: '#', isActive: false },
{ name: 'CONTACT', url: '#', isActive: false }
]
};
this.menuItems = [];
}
onNavItemClick = itemName => {
const nextMenuItems = this.state.menuItems.map(item => {
if (item.name === itemName) {
return { ...item, isActive: true };
}
return { ...item, isActive: false };
});
this.setState({
menuItems: nextMenuItems
});
};
render() {
return (
<nav>
<ul>
CHOOSE:
{this.state.menuItems.map((item, i) => (
<NavItem
key={item.name}
name={item.name}
isActive={item.isActive}
onClick={this.onNavItemClick}
url={item.url}
/>
))}
</ul>
</nav>
);
}
}
NavItem.js
import React from 'react';
export default class NavItem extends React.Component {
constructor() {
super()
console.log()
this.onClickFunction = () => this.props.onClick(this.props.name);
}
render() {
let item = this.props.data;
return (
<li className={this.props.isActive ? 'active' : ''}>
<a
href={this.props.url}
onClick={this.onClickFunction}
>
{this.props.name}``
</a>
</li>
);
}
}

Answer 3

Maybe you can use <NavLink to="" activeStyle={{color: 'red'}} /> component as links/tabs (from 'react-router-dom')

Answer 4

LiranC, Infinity, thanks for help and examples, I think I got it.
I knew it would end with lifting state to NavBar, only wasn't so sure how to make a reference to specific element..
I want to have only one element active at the time, with list item component for future purposes, so I mixed it and came up with such code. Looking forward to any further optimization advices.
NavBar.js
import React from 'react';
import NavItem from './NavItem';
export default class NavBar extends React.Component {
constructor() {
super();
this.menuItems = [
{ name: 'HOME', url: '#' },
{ name: 'NEWS', url: '#' },
{ name: 'CONTACT', url: '#' }
];
this.state = {
activeItem: null
}
}
handleOnClick = (e,i) => {
this.setState({activeItem: i});
}
render() {
return (
<nav>
<ul>
CHOOSE:
{this.menuItems.map( (item,i) =>
<NavItem
key={i}
idn={i}
data={item}
isActive={this.state.activeItem == i ? true : false}
onClick={this.handleOnClick} />
)}
</ul>
</nav>
);
}
}
NavItem.js
import React from 'react';
export default class NavItem extends React.Component {
render() {
let item = this.props.data;
return (
<li>
<a
href={item.url}
className={this.props.isActive ? 'active' : ''}
onClick={ (e) => this.props.onClick(e, this.props.idn) }>{item.name}
</a>
</li>
);
}
}