How to Show or hide element in React?

In React, you can show or hide elements by conditionally rendering them based on certain conditions using JavaScript expressions or state variables. Here are a few approaches you can use:

1. Conditional Rendering with JavaScript Expressions

We can conditionally render elements using JavaScript expressions within JSX.

For instance, we write

function MyComponent({ showElement }) {
  return (
    <div>
      {showElement && <p>This element will be shown if showElement is true.</p>}
    </div>
  );
}

Conditional Rendering with Ternary Operator

You can use a ternary operator for more complex conditions.

For instance, we write

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, User!</p>
      ) : (
        <p>Please log in to view this content.</p>
      )}
    </div>
  );
}

Conditional Rendering with State

We can control the visibility of elements using state.

import React, { useState } from 'react';

function MyComponent() {
  const [isVisible, setIsVisible] = useState(true);

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

  return (
    <div>
      <button onClick={toggleVisibility}>
        {isVisible ? 'Hide Element' : 'Show Element'}
      </button>
      {isVisible && <p>This element can be toggled.</p>}
    </div>
  );
}

Conditional Rendering with CSS

We can also use CSS to hide or show elements based on a class name or inline style.

function MyComponent({ isVisible }) {
  return (
    <div>
      <p className={isVisible ? 'visible' : 'hidden'}>Element with CSS</p>
    </div>
  );
}

Conditional Rendering with Libraries:

There are also libraries like react-visibility-sensor that help to conditionally render elements based on their visibility in the viewport.

import VisibilitySensor from 'react-visibility-sensor';

function MyComponent() {
  return (
    <VisibilitySensor>
      {({ isVisible }) => (
        <div>
          {isVisible ? <p>Element is visible</p> : <p>Element is not visible</p>}
        </div>
      )}
    </VisibilitySensor>
  );
}

Choose the approach that best fits your requirements and coding style. Each method has its advantages depending on the complexity of your application and the specific use case for showing or hiding elements.