Show or Hide a Component on Button Click in React

React is renowned for its ability to efficiently update the view to reflect changes in state, making it ideal for tasks like toggling the visibility of components.

In this article, we will explore how to show or hide a component on a button click in React, a common task in many web applications.

Introduction

In React, the visibility of a component can be controlled using state and conditional rendering. By changing the state, we can determine whether a component should be displayed. This process involves:

  • Setting up a state variable to track the visibility status.

  • Creating a button to toggle this state.

  • Using conditional rendering to show or hide the component based on this state.

Let’s dive into the code to see how this works.

Setting Up the React Environment

Before we begin, ensure you have a React environment set up. You can create a new React app using Create React App by running:

npx create-vite show-hide-component  --template react
cd show-hide-component
npm  install
npm run dev

Step-by-Step Implementation

1. Create a Functional Component

In the src directory, create a file named ToggleComponent.js. This file will house our component that shows or hides based on a button click.

2. Import Dependencies

At the top of ToggleComponent.js, import the necessary React hooks.

import React, { useState } from 'react';

3. Define the Component

In ToggleComponent.js, define a functional component named ToggleComponent.

function ToggleComponent() {
  const [isVisible, setIsVisible] = useState(false);

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

  return (
    <div>
      <button onClick={toggleVisibility}>
        {isVisible ? 'Hide Component' : 'Show Component'}
      </button>
      {isVisible && <div>Hey, I am now visible!</div>}
    </div>
  );
}

export default ToggleComponent;

Explanation of the Code

  • useState Hook: We use useState to create a state variable isVisible that will track whether the component is visible.

  • toggleVisibility Function: This function toggles the value of isVisible. When the button is clicked, this function is executed, flipping the state between true and false.

  • Conditional Rendering: The {isVisible && <div>Hey, I am now visible!</div>}

    line demonstrates conditional rendering. The text inside the div only appears when isVisible is true.

4. Use the Component in Your App

Open the App.js file and import ToggleComponent.

import React from 'react';
import ToggleComponent from './ToggleComponent';

function App() {
  return (
    <div className="App">
      <ToggleComponent />
    </div>
  );
}

export default App;

Now, when you run your React app, you should see a button that toggles the visibility of the text "Hey, I am now visible!".

Advanced Usage

For a more complex application, you might need to manage the visibility of several components or handle different states.

In such cases, consider using a more sophisticated state management solution like Redux or Context API to manage the state across multiple components.

Conclusion

Controlling the visibility of components in React is a fundamental task that can be accomplished through the useState hook and conditional rendering.

This technique is scalable and can be adapted for more complex scenarios involving multiple components and states.

By mastering this pattern, you'll be well-equipped to handle a wide range of dynamic behavior in your React applications.