Creating show and hide sections with buttons in reactjs

Question

I have three buttons that when clicking show and individual div but this is done in reactjs

import React, { Component } from 'react';

export class ModeExtended extends Component {

constructor() {
    super();

    this.busButton = this.busButton.bind(this);
    this.trainButton = this.trainButton.bind(this);
    this.tramButton = this.tramButton.bind(this);

    this.state = {
        isHidden: false,
    }
}


busButton(){
    console.log('Bus Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHidden: !prevState.isHidden
        };
    });
}

trainButton(){
    console.log('Train Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHidden: !prevState.isHidden
        };
    });
}

    tramButton(){
    console.log('Tram Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHidden: !prevState.isHidden
        };
    });
}


render() {
    return (
        <div>   
            <h5>Mode Extended</h5>

            <button onClick={this.busButton}>Bus</button>
            <button onClick={this.trainButton}>Train</button>
            <button onClick={this.tramButton}>Tram</button>





            {this.state.isHidden && (
                <div>
                    <h6>You can show Bus Data Now....</h6>
                </div>
            )}

            {this.state.isHidden && (
                <div>
                    <h6>You can show Train Data Now....</h6>
                </div>
            )}

            {this.state.isHidden && (
                <div>
                    <h6>You can show Tram Data Now....</h6>
                </div>
            )}


        </div>
    )
}
}

export default ModeExtended

When I click any of the buttons it shows all bus, tram and train data - how do I get them to just show one thing at a time and making sure that the other states are closed. I am really missing something here and need a pointer or two or three…

How can I add an ID to make each button open separate from each other and when one is clicked how can I close the rest of the divs - or open state, I am so lost here. Please help me out.

Cheers as always!

Here is a REPL of my code:

Answer 1

You need to have 3 different isHidden properties to control your divs. You can do it like this:

this.state = {
    isHiddenBus: false,
    isHiddenTrain: false,
    isHiddenTram: false,
    }

and then in your render like this:

{this.state.isHiddenBus && (
                <div>
                    <h6>You can show Bus Data Now....</h6>
                </div>
            )}

            {this.state.isHiddenTrain && (
                <div>
                    <h6>You can show Train Data Now....</h6>
                </div>
            )}

            {this.state.isHiddenTram && (
                <div>
                    <h6>You can show Tram Data Now....</h6>
                </div>
            )}

also your buttons have to change to state accordingly to this.

busButton(){
    console.log('Bus Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHiddenBus: !prevState.isHiddenBus
            isHiddenTram: false
            isHiddenTrain: false
        };
    });
}

trainButton(){
    console.log('Train Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHiddenTrain: !prevState.isHiddenTrain
            isHiddenBus: false
            isHiddenTram: false

        };
    });
}

    tramButton(){
    console.log('Tram Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHiddenTram: !prevState.isHiddenTram
            isHiddenTrain: false
            isHiddenBus: false
        };
    });
}

Answer 2

you can do somthing like this:

            import React, { Component } from 'react';

            export class ModeExtended extends Component {

            constructor() {
                super();

                this.state = {
                    curDivIndex:0,//currently visible div index
            //        isHidden: false,
                }
            }


            renderDiv=()=>{
                switch(this.state.curDivIndex){
                    case 1:return  <div>        <h6>You can show Bus Data Now....</h6>    </div>
                    case 2:return  <div>       <h6>You can show Train Data Now....</h6>   </div>
                    case 3:return  <div>       <h6>You can show Tram Data Now....</h6>   </div>
                }
                return null
            }
            setVisibleDiv=(index)=>{
                this.setState({curDivIndex:index})
            }

            render() {
                return (
                    <div>   
                        <h5>Mode Extended</h5>
                        <button onClick={()=>{this.setVisibleDiv(1)} }>Bus</button>
                        <button onClick={()=>{this.setVisibleDiv(2)}}>Train</button>
                        <button onClick={()=>{this.setVisibleDiv(3)}}>Tram</button>
                        {this.renderDiv()}
                    </div>
                )
            }
            }

            export default ModeExtended

EDIT

you want to have three different buttons, on click of each certain div needs to be visible. you can achieve this by maintaining the index of currently visible div. when user clicks any button you have to set the index of div to be visible which in the above code is achieved by using setVisibleDiv(index) call. and you can at rendering time use curDivIndex to decide visible div.