[React.js] - Part 5. React Conditional Rendering
Ace Lennox
In React, conditional rendering lets you display components based on certain conditions. This guide will explore different approaches with clear examples to help you understand how to implement conditional rendering in your applications.
1. Using the if Statement
The if statement allows you to render different components based on a condition.
Example
Let’s create two components to represent different outcomes:
function Success() {
return <h1>Success!</h1>;
}
function Failure() {
return <h1>Failure!</h1>;
}
Next, we’ll create a parent component that decides which component to render:
function Result(props) {
const isSuccess = props.isSuccess;
if (isSuccess) {
return <Success />;
}
return <Failure />;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Result isSuccess={true} />);
Key Points:
The
ifstatement checks the value ofisSuccess.If
isSuccessistrue, theSuccesscomponent is rendered.Otherwise, the
Failurecomponent is rendered.
2. Using the Logical && Operator
The logical && operator allows you to conditionally display a component or element when a condition evaluates to true.
Example
Let’s build a Garage component that shows the number of cars only if there are cars in the array:
function Garage(props) {
const cars = props.cars;
return (
<div>
<h1>Garage</h1>
{cars.length > 0 && (
<h2>You have {cars.length} car(s) in your garage.</h2>
)}
</div>
);
}
const carList = ["Toyota", "Honda", "Ford"];
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Garage cars={carList} />);
Explanation:
If
cars.length > 0evaluates totrue, the message is displayed.If
cars.length === 0, nothing is rendered.
Try rendering an empty array:
const carList = [];
root.render(<Garage cars={carList} />);
3. Using the Ternary Operator
The ternary operator provides a concise way to conditionally render elements.
Syntax
condition ? renderIfTrue : renderIfFalse;
Example
Revisiting the first example, we can use a ternary operator instead of an if statement:
function Result(props) {
const isSuccess = props.isSuccess;
return (
<div>
{isSuccess ? <h1>Success!</h1> : <h1>Failure!</h1>}
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Result isSuccess={false} />);
Explanation:
If
isSuccessistrue, theSuccessmessage is rendered.If
isSuccessisfalse, theFailuremessage is displayed.
Choosing the Right Approach
Use
ifstatements for complex logic or when conditions require multiple steps.Use
&&operators for conditions where no fallback component is needed.Use ternary operators for inline conditions with two possible outcomes.
Conclusion
React’s conditional rendering offers multiple approaches to dynamically render components based on your application’s state or props. By mastering these techniques, you can build flexible and user-friendly interfaces.
Experiment with the examples above to see how conditional rendering can make your React applications more dynamic and responsive!
Source Code
The complete source code for this project is available on GitHub