Estoy usando la función interna setState para cambiar el color de mi enlace en la barra de navegación.

Pero por alguna razón, el color no cambia en el primer clic, pero cambia en el segundo clic. Creo que la función constructora está actualizando el estado automáticamente.

Sé que tan pronto como se llama a la función setState, los componentes se vuelven a representar automáticamente, pero el índice activo sigue siendo '0' después de hacer clic en el enlace "TODOS LOS DATOS", que en su lugar debería convertirse en '1' como podemos ver en el código.

Contenido de Nav.js: -

 import React from 'react'; import { Link } from 'react-router-dom'; import LogOutLink from './LogOutLink'; import './Nav.scss'; class MyLink extends React.Component { handleClick = () => this.props.onClick(this.props.index) render() { return <Link to={this.props.to} className={this.props.isActive ? 'link active' : 'link'} onClick={this.handleClick}>{this.props.text}</Link> } } class Nav extends React.Component { constructor(props) { super(props); this.state = { activeIndex: 0 }; } handleClick = (index) => { this.setState({ activeIndex: index }) } render() { return ( <> <ul> <li><MyLink to='/search' index={0} isActive={this.state.activeIndex === 0} onClick={this.handleClick} text='SEARCH' /></li> <li><MyLink to='/alldata' index={1} isActive={this.state.activeIndex === 1} onClick={this.handleClick} text='ALL DATA' /></li> <div style={{ float: 'right' }}><li><LogOutLink /></li></div> </ul> </> ); } } export default Nav;

Contenido de Nav.scss: -

 li{ display: inline; } .link{ display: inline; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 25px; } .link:hover:not(.active){ background-color: grey; } .active{ background-color: white; color: black; }

Captura de pantalla