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

#javascript #learning #career #design

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;
}

Example (React.js):

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

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;
}

Example (React.js):

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

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;
}

Example (React.js):

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

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>
  );
};

/* CSS */
.active-class {
  background-color: green;
}

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

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>
  );
};

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>
  );
};

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>
  );
};

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>
  );
};

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>
  );
};

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>
      )}
    </>
  );
};

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!