Creating show and hide sections with buttons in reactjs

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
        };
    });
}

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.

Or you can achieve this by declaring state properties for all case:

this.state = {
  hiddenBus: false,
  hiddenTrain: false,
  hiddenTram: false,
}

providing a name attribute to your buttons like so:

  <button name="hiddenBus" onClick={toggleDisplay}>Bus</button>
  <button name="hiddenTrain" onClick={toggleDisplay}>Train</button>
  <button name="hiddenBus" onClick={toggleDisplay}>Tram</button>

then by defining the toggleDisplay function to toggle their display:

toggleDisplay = (event) => {
  event.preventDefault(); // default behavior of a clicked button is to send a form so let's prevent this

  const { name } = event.target; // find the clicked button name value 

  this.setState((prevState => ({
    [name]: !prevState[name],
  }));
}

Setting[name] enables us to target the state prop via the nameattribute value and update it based on the previous state.