REACTJS button that show and hide a component when you click

Question

i have a question with react jsx :

I have a code with 3 buttons when you click on one it shows the component requested and then you click again it disappears, but I want that when you click on buttons it closes the component you opened before.

Here is my code with the import and the buttons that are linked

import React, {Component} from "react";
import Button from "react-bootstrap/Button";
import ContentForm from "../Component4/content";
import QuizzForm from "../Component5/quizz";
import VideoForm from "../Component6/video";

class ButtonList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            showHideContent: false,
            showHideQuizz: false,
            showHideVideo: false
        };
    }

    hideComponent(name) {
        console.log(name);
        switch (name) {
            case "showHideContent":
                this.setState({ showHideContent: !this.state.showHideContent});
                break;
            case "showHideQuizz":
                this.setState({ showHideQuizz: !this.state.showHideQuizz});
                break;
            case "showHideVideo":
                this.setState({ showHideVideo: !this.state.showHideVideo});
                break;
            default:
                return null;
        }
    }
    render() {
        const { showHideContent, showHideQuizz, showHideVideo } = this.state;

        return <div className="container button-container my-4">
            {
                <div>
                    {showHideContent && <ContentForm/>}
                    {showHideQuizz && <QuizzForm/>}
                    {showHideVideo && <VideoForm/>}
                </div>
            }
            <div className="row justify-content-center">
                <h1 className="title1">+ ajout contenu lesson</h1>
            </div>

            <div className="row justify-content-center">
                <Button className="buttonlist col-1" onClick={() => this.hideComponent("showHideContent")}>
                    Contenu
                </Button>

                <Button className="buttonlist col-1" onClick={() => this.hideComponent("showHideQuizz")}>
                    Quiz
                </Button>

                <Button className="buttonlist col-1" onClick={() => this.hideComponent("showHideVideo")}>
                    Video
                </Button>
            </div>
        </div>
    }
}

export default ButtonList;
```

it works like this but I would like to add the detail that when you click on one button it closes all the opened ones
I though I should add a setState but I really don't know where to put it 

Answer 1

You can use a method for each button that focuses on hiding or showing each component.

<Button onClick={() => this.setState({showHideContent:!showHideContent})} >Contenu</Button>

It can be implemented in the other buttons as well. That way you don't need a centralized controller and you don't use hard-coded values.

You could also create a "toggle" method and pass it as a parameter the state you want to be updated.

Answer 2

You could keep track of the name of the opened component in your component state.

class ButtonList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            openedComponent: undefined,
        };
    }

    toggleComponent(name) {
        console.log(name);
        if (this.state.openedComponent === name) {
            this.setState({ openedComponent: undefined });
        }
        else {
            this.setState({ openedComponent: name });
        }
    }

    render() {
        const { openedComponent } = this.state;

        return <div className="container button-container my-4">
            {
                <div>
                    {openedComponent === "content" && <ContentForm/>}
                    {openedComponent === "quizz" && <QuizzForm/>}
                    {openedComponent === "video" && <VideoForm/>}
                </div>
            }
            <div className="row justify-content-center">
                <h1 className="title1">+ ajout contenu lesson</h1>
            </div>

            <div className="row justify-content-center">
                <Button className="buttonlist col-1" onClick={() => this.toggleComponent("content")}>
                    Contenu
                </Button>

                <Button className="buttonlist col-1" onClick={() => this.toggleComponent("quizz")}>
                    Quiz
                </Button>

                <Button className="buttonlist col-1" onClick={() => this.toggleComponent("video")}>
                    Video
                </Button>
            </div>
        </div>
    }
}