How to show or hide another component on Click in React

This article will show you how to show or hide another component on Click in React using several methods, such as state combined with the ternary operator or display: none method.

Show or hide another component on Click in React

Components in ReactJS or components are the core structures of React. In other words, every application you will develop in React will be made up of parts called Components. These components make building UIs so much easier.

Using state combined with the ternary operator method

Javascript ternary is like javascript if else condition. Ternary operator helps programmers can quickly check a condition in javascript. We can use the operator to customize the component visibility by checking the ‘isVisible’ state. See the example below to understand more about it.

Code:

import { useState } from "react";

const App = () => {
    const [isVisible, setIsVisible] = useState("");

    const handleClick = () => {
        setIsVisible(!isVisible);
    };

    return (
        <div>
            <h2>LearnShareIT</h2>
            <hr />
            {isVisible ? <Header /> : null}
            <button onClick={() => handleClick()}>Show/Hide</button>
        </div>
    );
};

function Header() {
    return (
        <div>
            <h2>Header</h2>
        </div>
    );
}

export default App;

Output:

As you can see in the above code, we have a Header component that needs to show and hide every time you click the button on the parent component page. We use a state generated by the useState() hook to check the child component’s current visible state. When you click the button, the state will be toggled. If the value is true, the component will appear. 

Using display: none method

As you probably already know, the display is the property that specifies how an element is displayed and display: none is responsible for making an element invisible. Based on the above property, we can use this property to show and hide a component based on the onClick event. The idea would be that when an element is clicked, the component’s style will change the value, and the hidden effect will be performed.

Code:

import { useRef } from "react";

const App = () => {
    const ref = useRef(null);
    const handleClick = () => {

        if (ref.current.style.display == "none") {
            ref.current.style.display = "block";
        } else {
            ref.current.style.display = "none";
        }

    };

    return (
        <div>
            <h2>LearnShareIT</h2>
            <hr />
            <div ref={ref}>
                <Header />
            </div>
            <button onClick={() => handleClick()}>Show/Hide</button>
        </div>
    );
};

function Header() {
    return (
        <div>
            <h2>Header</h2>
        </div>
    );
}

export default App;

You would wrap the component that needs to be visible with a <div> tag because we cannot style a component, then assign that div a ref to be able to access its properties. When you click the hide component button, we will check the current display property of the ref and change it from display: none and display: block. Wish you success with the methods mentioned in the article.

Summary

Summarizing the article has shown you several ways to show or hide another component on Click in React. However, we recommend using state combined with the ternary operator method because it will be neater and easier to understand.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs