How to Use the useState Hook to Show/Hide Content in React

When building a React web application, you may want to show or hide content based on user interaction. A common way to accomplish this is to use a button that toggles the visibility of the content. In this article, we'll show you how to use the useState hook to implement a button to show/hide content in React.

The useState Hook

The useState hook is a built-in hook in React that allows us to add state to a functional component. With useState, we can create a state variable and a function to update that variable. Whenever the state variable is updated, React will automatically re-render the component to reflect the new state.

To use useState, we first need to import it from the React library:

import React, { useState } from 'react';

Then, we can call useState and pass in an initial value for the state variable:

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

In this example, we're setting the initial value of isVisible to false, indicating that the content should be hidden by default. We're also using array destructuring to create two variables: isVisible, which holds the current value of the state variable, and setIsVisible, which is a function that updates the state variable.

Toggling the Content

Now that we have a way to keep track of whether the content should be shown or hidden, we can use the isVisible state variable to conditionally render the content in our component.

To do this, we can use a conditional statement to check whether isVisible is true or false, and render the content accordingly:

return (
  <div>
    <button onClick={() => setIsVisible(!isVisible)}>
      {isVisible ? 'Hide content' : 'Show content'}
    </button>
    {isVisible && (
      <div>
        <p>This is the content to show/hide.</p>
      </div>
    )}
  </div>
);

In this example, we're rendering a button that toggles the isVisible state when clicked. We're also using a conditional statement to render the content only if isVisible is true. If isVisible is false, the content will not be rendered.

full code

import React, { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide content' : 'Show content'}
      </button>
      {isVisible && (
        <div>
          <p>This is the content to show/hide.</p>
        </div>
      )}
    </div>
  );
}

export default ShowHideContent;

Conclusion

In this article, we've shown you how to use the _useState _hook to show/hide content in React. By creating a state variable to keep track of whether the content should be visible, and conditionally rendering the content based on the state variable, we can create a simple and effective way to toggle the visibility of content in our React components.