This content originally appeared on DEV Community and was authored by Pratik Tamhane
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 own projects with powerful conditional rendering!
shop Link : https://buymeacoffee.com/pratik1110r/extras
LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/
Behance : https://www.behance.net/pratiktamhane
This content originally appeared on DEV Community and was authored by Pratik Tamhane
Pratik Tamhane | Sciencx (2024-09-06T13:36:27+00:00) 10 Conditional Rendering Examples in CSS and React.js 🚀(Part 1). Retrieved from https://www.scien.cx/2024/09/06/10-conditional-rendering-examples-in-css-and-react-js-%f0%9f%9a%80part-1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.