The state is applied to all the elements, not only to the selected one

Question

I have three buttons with the same function that show one content or another depending on the button clicked. This part works perfectly, but I need that when you click on a button the class "active" is added. The active class must have a toggle effect and disappear from the pressed button when another button is pressed and put on it.

Edit: Now when I click on any button it adds the class "active" in all. I need you to just add the "active" class in the element that has been clicked and not in the others

This is my code:

class Widgets extends Component {   
    constructor(props) {
        super(props);
        this.state = {
            componente: [],
            addActive: '',
        };
    }
    mostrarComponente(componentName) {
      this.setState({
            componente: componentName,
            addActive: componentName,
        }
            , () => {
                let a = "";
                for (var i in this.state.componente){
                    a = this.state.componente[i] + " "
                }
                console.log("Clicked: ", a)
            }
        );
    }
    renderComponent(){
        switch(this.state.componente) {
            case "1":
                return <Telefono />
            case "2":
                return <ChatInterno />
            case "3":
                return <HistorialLlamadas />
            default:
                return <Telefono />
        }
    }
    render(){
        return (
                ***some code***
                <div id="bq-comunicacion">
                    <nav>
                        <ul>
                            <li><button onClick={() => this.mostrarComponente('1')} id="mn-telefono" className={this.state.addActive ? 'active' : ''}><Icon icon="telefono" className='ico-telefono'/></button></li>
                            <li><button onClick={() => this.mostrarComponente('2')} id="mn-chat" className={this.state.addActive ? 'active' : ''}><Icon icon="chat-interno" className='ico-chat-interno'/></button></li>
                            <li><button onClick={() => this.mostrarComponente('3')} id="mn-llamadas" className={this.state.addActive ? 'active' : ''}><Icon icon="historial-llamadas" className='ico-historial-llamadas'/></button></li>
                        </ul>
                    </nav>
                    <div className="content">
                        { this.renderComponent() }
                    </div>
                </div>
    );
    }
}

Can you help me? I think something is missing from my onClick = {() => this.showComponent ('1')}, but I do not understand what.

Answer 1

I dont understand why do you need this.state.componente and this.state.componente[] and addActive

You can simply store the active component name in this.state.componente and do this className={this.state.componente == "1" ? 'active' : ''

class Widgets extends Component {   
    constructor(props) {
        super(props);
        this.state = {
            componente: '1',
        };
    }
    mostrarComponente(componentName) {
      this.setState({
            componente: componentName,
            addActive: componentName,
        }
            , () => {
                console.log("Clicked: ", this.state.componente)
            }
        );
    }
    renderComponent(){
        switch(this.state.componente) {
            case "1":
                return <Telefono />
            case "2":
                return <ChatInterno />
            case "3":
                return <HistorialLlamadas />
            default:
                return <Telefono />
        }
    }
    render(){
        return (
                ***some code***
                <div id="bq-comunicacion">
                    <nav>
                        <ul>
                            <li><button onClick={() => this.mostrarComponente('1')} id="mn-telefono" className={this.state.componente == "1"  ? 'active' : ''}><Icon icon="telefono" className='ico-telefono'/></button></li>
                            <li><button onClick={() => this.mostrarComponente('2')} id="mn-chat" className={this.state.componente == "2" ? 'active' : ''}><Icon icon="chat-interno" className='ico-chat-interno'/></button></li>
                            <li><button onClick={() => this.mostrarComponente('3')} id="mn-llamadas" className={this.state.componente == "3" ? 'active' : ''}><Icon icon="historial-llamadas" className='ico-historial-llamadas'/></button></li>
                        </ul>
                    </nav>
                    <div className="content">
                        { this.renderComponent() }
                    </div>
                </div>
    );
    }
}