I am using the internal setState function to change the colour of my link in navbar.

But due to some reason the color does not change in first click but does change in second click. I think the constructor function is updating the state automatically.

I know that as soon as the setState function is called the components are rerendered automatically but the activeIndex remains still '0' after clicking the "ALL DATA" link which instead should become '1' as we can see from the code.

Content of 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;

Content of 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;
}

Screenshot