Creating show and hide sections with buttons in react

Hi folks,

I have three buttons that when click 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…

Cheers as always!

P.S - I have created a Repl.it here: (Oh nice it shows up here in the forum - wow amazing).

Thanks!!

Can anyone point me in the right direction please, I am lost and would love to know how to make these buttons work.

Hi Randell,

Thanks for the info, ok I get the idea of using ID - is there a page where I can read more on this?

Cheers!!

A page on how to add an id to an element?