How to show and hide data based on condition in React?

Question

How to show and hide data based on condition in React?

Answer

Use a state variable and conditional rendering.

import { useState } from 'react';

function ToggleData() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        {show ? 'Hide Data' : 'Show Data'}
      </button>

      {show && <p>This is some conditional data!</p>}
    </div>
  );
}

✅ How it works:

• show tracks visibility.
• When the button is clicked, the value toggles.
• React re-renders, and {show && <p>...</p>} controls visibility.

Real-World Example

• Show/hide a modal or sidebar.
• Expand/collapse FAQ answers.
• Toggle loading or error messages.

Quick Practice

Build a component that shows and hides a user’s profile card when a button is clicked.

Summary

Use useState + conditional rendering to control what appears on screen.