React Conditionals
React allows you to conditionally render components.
There are various ways to accomplish this.
if Statement
We can use the if JavaScript operator to determine which component to render.
Example
We’ll use the following two components:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Example
Now, we’ll make another component that determines which component to render based on a condition:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
Try setting the isGoal attribute to true.
Example
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={true} />);
Logical && Operator
Another method for conditionally rendering a React component is to use the && operator.
Example
We can incorporate JavaScript expressions in JSX using curly braces:
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}
const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);
If cars.length > 0 equals true, the expression after && will be rendered.
Try emptying the cars array.
Example
const cars = [];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);
Ternary Operator
Another method for conditionally rendering components is to use a ternary operator.
condition ? true : false
We shall return to the goal example.
Example
Return the MadeGoal component if isGoal is true; else, return the MissedGoal component.
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
