DEV Community

Cover image for 10 Conditional Rendering Examples in CSS and React.js 🚀(Part 1)
Pratik Tamhane
Pratik Tamhane

Posted on • Updated on

10 Conditional Rendering Examples in CSS and React.js 🚀(Part 1)

In this follow-up post, we'll continue exploring more ways to implement conditional rendering in both CSS and React.js. These techniques will help you build dynamic and responsive UIs with ease!

1. Conditional Rendering with CSS (Display: None)

Using CSS, you can conditionally hide elements with display: none;. This method completely removes the element from the document flow.

/* CSS */
.hidden {
  display: none;
}

Enter fullscreen mode Exit fullscreen mode

Example (React.js):

const Example1 = ({ isVisible }) => {
  return <div className={isVisible ? "" : "hidden"}>I am conditionally visible!</div>;
};


Enter fullscreen mode Exit fullscreen mode

2. Conditional Rendering with CSS (Visibility)

Instead of removing an element from the document flow, you can use visibility to hide it but still occupy its space.

/* CSS */
.hidden-visibility {
  visibility: hidden;
}

Enter fullscreen mode Exit fullscreen mode

Example (React.js):

const Example3 = ({ isVisible }) => {
  return <div className={isVisible ? "" : "invisible"}>I fade out when not visible!</div>;
};



Enter fullscreen mode Exit fullscreen mode

3. Conditional Styling with opacity

Using opacity, you can make an element visible or invisible while keeping it in the flow. A value of 0 hides the element, while 1 shows it.

/* CSS */
.invisible {
  opacity: 0;
}

Enter fullscreen mode Exit fullscreen mode

Example (React.js):

const Example3 = ({ isVisible }) => {
  return <div className={isVisible ? "" : "invisible"}>I fade out when not visible!</div>;
};


Enter fullscreen mode Exit fullscreen mode

4. Conditional Class Rendering with ternary in React

Sometimes, conditional rendering of classes is needed to apply different styles dynamically.

const Example4 = ({ isActive }) => {
  return (
    <div className={isActive ? "active-class" : "inactive-class"}>
      This element changes styles based on its state!
    </div>
  );
};


Enter fullscreen mode Exit fullscreen mode
/* CSS */
.active-class {
  background-color: green;
}

.inactive-class {
  background-color: red;
}


Enter fullscreen mode Exit fullscreen mode

5. Conditional Inline Style in React

React allows you to apply conditional inline styles using objects.

const Example5 = ({ isHighlighted }) => {
  return (
    <div style={{ backgroundColor: isHighlighted ? "yellow" : "transparent" }}>
      Highlight me conditionally!
    </div>
  );
};

Enter fullscreen mode Exit fullscreen mode

6. Conditional Rendering using && operator

One of the most common ways to conditionally render elements in React is using the && operator.

const Example6 = ({ showElement }) => {
  return (
    <div>
      {showElement && <p>This element appears only if the condition is true!</p>}
    </div>
  );
};


Enter fullscreen mode Exit fullscreen mode

7. Conditional Rendering using Ternary Operator

You can use a ternary operator to render one element or another based on a condition.

const Example7 = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
};


Enter fullscreen mode Exit fullscreen mode

8. Conditional Form Rendering based on State

Using state in React, you can conditionally render form fields or buttons.

const Example8 = ({ isFormVisible }) => {
  return (
    <div>
      {isFormVisible ? (
        <form>
          <input type="text" placeholder="Enter your name" />
        </form>
      ) : (
        <button onClick={() => console.log('Show form')}>Show Form</button>
      )}
    </div>
  );
};

Enter fullscreen mode Exit fullscreen mode

9. Conditional Button Text Rendering

Change the text of a button conditionally based on the current state.

const Example9 = ({ isSubscribed }) => {
  return (
    <button>
      {isSubscribed ? "Unsubscribe" : "Subscribe"}
    </button>
  );
};



Enter fullscreen mode Exit fullscreen mode

10. Conditional Rendering using Fragments (<>)

In cases where you want to render multiple elements conditionally without wrapping them in a div, you can use fragments.

const Example10 = ({ showContent }) => {
  return (
    <>
      {showContent ? (
        <>
          <h2>Welcome!</h2>
          <p>This is the content you wanted to see.</p>
        </>
      ) : (
        <p>Click to see more content.</p>
      )}
    </>
  );
};


Enter fullscreen mode Exit fullscreen mode

Conditional rendering in CSS and React.js is crucial for creating dynamic and responsive UIs. By mastering these techniques, you can control when and how elements appear on your page. 🎨

Feel free to experiment with these examples and enhance your projects with powerful conditional rendering!

Part Title Link
2 Part 2 : 10 Conditional Rendering Examples in CSS and React.js 🚀 (Part 2) Read

shop Link : https://buymeacoffee.com/pratik1110r/extras

LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/

Behance : https://www.behance.net/pratiktamhane

Top comments (3)

Collapse
 
just_ritik profile image
Ritik Pal

HelpFul Thanks!

Collapse
 
uicraft_by_pratik profile image
Pratik Tamhane

Thank You♥️