In React, conditional rendering is a powerful way to dynamically control what gets displayed in the user interface based on certain conditions. Here are various techniques for implementing conditional rendering:
Using if Statements
You can use if statements inside the render method to conditionally render components. This approach is straightforward but can make the render method longer and harder to read.
import React from 'react';
class MyComponent extends React.Component {
render() {
const isLoggedIn = this.props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign in.</h1>;
}
}
}
Using Ternary Operator
The ternary operator provides a concise way to render components conditionally.
import React from 'react';
class MyComponent extends React.Component {
render() {
const isLoggedIn = this.props.isLoggedIn;
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
</div>
);
}
}
Using Logical && Operator
The logical && operator allows you to render a component only if the condition is true. If the condition is false, it will render nothing.
import React from 'react';
class MyComponent extends React.Component {
render() {
const isLoggedIn = this.props.isLoggedIn;
return (
<div>
{isLoggedIn && <h1>Welcome back!</h1>}
</div>
);
}
}
Using Switch Case
For more complex conditions, you can use a switch statement to determine what to render.
import React from 'react';
class MyComponent extends React.Component {
render() {
const status = this.props.status;
switch (status) {
case 'loading':
return <h1>Loading...</h1>;
case 'error':
return <h1>Error occurred!</h1>;
case 'loaded':
return <h1>Data loaded successfully!</h1>;
default:
return <h1>Unknown status</h1>;
}
}
}
Inline Conditional Rendering
You can embed conditions directly within JSX, which is useful for simple conditions.
import React from 'react';
class MyComponent extends React.Component {
render() {
const isLoggedIn = this.props.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please sign in.</h1>
)}
</div>
);
}
}
Conditional Rendering with Functions
Encapsulating conditional rendering logic inside functions can make your code more readable and organized.
import React from 'react';
class MyComponent extends React.Component {
renderGreeting(isLoggedIn) {
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
}
return <h1>Please sign in.</h1>;
}
render() {
const isLoggedIn = this.props.isLoggedIn;
return (
<div>
{this.renderGreeting(isLoggedIn)}
</div>
);
}
}
Using Hooks for Conditional Rendering in Functional Components
In functional components, hooks such as useState and useEffect can be used to manage state and side effects, enabling conditional rendering.
import React, { useState } from 'react';
const MyComponent = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
{isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please sign in.</h1>
)}
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
{isLoggedIn ? 'Logout' : 'Login'}
</button>
</div>
);
};
export default MyComponent;
Conditional Rendering with Fragments
React fragments (<>) can be used to group multiple elements without adding extra nodes to the DOM, which is useful for conditional rendering involving multiple elements.
import React from 'react';
const MyComponent = ({ isLoggedIn }) => {
return (
<>
{isLoggedIn ? (
<>
<h1>Welcome back!</h1>
<button>Logout</button>
</>
) : (
<>
<h1>Please sign in.</h1>
<button>Login</button>
</>
)}
</>
);
};
export default MyComponent;
