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.

You have a single isHidden state property. You are using this single isHidden state property to conditionally render all of the buttons. What ever the state of isHidden is will be applied across all of the buttons.

You could create three separate state properties (one for each type) and update each separately. If you create a unique id for each button, then you could even get by with a single onClick method that uses the id to toggle the applicable state property.

2 Likes

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?