How to Show and Hide Components in React Easily

In React, you can show or hide a component by using state to track visibility and conditional rendering with JavaScript expressions inside JSX. Use a boolean state variable and render the component only when it is true, for example: {isVisible && <Component />}.

Syntax

To show or hide a component in React, use a boolean state variable to control visibility. Then use conditional rendering inside JSX with logical AND (&&) or ternary (?) operators.

• State variable: Holds true or false to track if the component should show.
• Conditional rendering: Render component only if state is true.

jsx

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

return (
  <div>
    {isVisible && <MyComponent />}
    <button onClick={() => setIsVisible(!isVisible)}>
      Toggle Component
    </button>
  </div>
);

Example

This example shows a button that toggles the visibility of a message component. When you click the button, the message appears or disappears.

jsx

import React, { useState } from 'react';

function Message() {
  return <p>Hello! I am visible now.</p>;
}

export default function App() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide' : 'Show'} Message
      </button>
      {isVisible && <Message />}
    </div>
  );
}

Output

Button labeled 'Show Message'. When clicked, text 'Hello! I am visible now.' appears below and button label changes to 'Hide Message'. Clicking again hides the text and changes button label back.

Common Pitfalls

Common mistakes when showing or hiding components in React include:

• Not using state to track visibility, causing no re-render on toggle.
• Trying to hide components by CSS only without removing them from the DOM, which can cause unexpected behavior.
• Using incorrect conditional expressions that always render or never render the component.

jsx

/* Wrong: Using a variable instead of state - no re-render on change */
let isVisible = false;

function App() {
  return (
    <div>
      {isVisible && <Message />}
      <button onClick={() => { isVisible = !isVisible; }}>
        Toggle
      </button>
    </div>
  );
}

/* Right: Use state to trigger re-render */
function App() {
  const [isVisible, setIsVisible] = React.useState(false);

  return (
    <div>
      {isVisible && <Message />}
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
    </div>
  );
}

Quick Reference

Tips for showing and hiding components in React:

• Use useState to hold visibility state.
• Use {'{isVisible && }'} for simple show/hide.
• Use ternary {'{isVisible ? : null}'} if you want an explicit else case.
• Update state with event handlers like onClick.
• Remember React re-renders on state change to update UI.

Key Takeaways

Use React state to track if a component should be visible or hidden.

Render components conditionally using logical AND (&&) or ternary operators in JSX.

Always update visibility state with React's setState function to trigger UI updates.

Avoid manipulating visibility with variables outside state to prevent no re-render.

Use buttons or events to toggle visibility by changing state.