This content originally appeared on Bits and Pieces - Medium and was authored by Quokka Labs
How to use conditional rendering to create flexible and dynamic components in React
As a developer working with React, you understand the importance of building dynamic and interactive user interfaces for creating engaging and effective apps.
One technique that can assist you in achieving this goal is conditional rendering, also known as React conditional render or conditional rendering react Javascript. It allows you to control the rendering of components based on various conditions in your application.
This guide will cover the basics of React conditional render and explore various techniques and approaches for implementing it in your React projects. Whether you’re a learner looking to study the ropes or an experienced developer looking to brush up on your skills, this guide has something for everyone.
By the end of this guide, you’ll have a strong understanding of how to use conditional rendering to create flexible and dynamic components in React. If you’re ready to take your app development to the next level, consider contacting a reputable company for expert guidance and support. Let’s get started!
Conditional Rendering
In React JavaScript, you can create specialized components encapsulating your desired behavior and functionality. You can then use these components to selectively render certain elements based on the current state of your application, creating dynamic and responsive user interfaces. By utilizing this technique, you can effectively control which elements are shown to the user at any given time, enhancing your app’s overall interactivity and engagement.
Conditional rendering in React involves using JavaScript logic to control which elements are displayed in the user interface. It is achieved by using JavaScript operators such as “if” or the “conditional operator,” which allow you to create elements based on the current state of the application. When the state of the application changes, React will automatically update the user interface to match the new conditions, ensuring that the correct elements are displayed to the user at all times.
This powerful technique allows developers to create dynamic and responsive user interfaces that adapt to changing conditions and user input.
Consider the two components shown below:
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
Now, we will make a component called “Greeting.” It will display that two components depending on whether a user is logged in.
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);Ternary Operation
The conditional operator is a unique JavaScript operator that takes three operands. It functions similarly to an if-else statement, allowing you to write concise if-else statements. The overall syntax for the conditional operator is:
condition ? expr1 : expr2
For instance, consider a situation where you have a toggle in your React component that switches between “edit” and “view” modes. You can use a simple boolean variable to decide which mode to render based on the current state of the toggle.
render() {
const mode = this.state.isEditMode;
return (
<div>
{mode ? <EditMode /> : <ViewMode />}
</div>
);
}In this code, the mode variable is used to determine whether to render the <EditMode /> or <ViewMode /> component based on the value of this.state.isEditMode. Suppose this.state.isEditMode is true. In that case, the <EditMode /> component will be rendered, and if false, the <ViewMode /> component will be generated. The conditional operator allows you to concisely control which elements are displayed based on certain conditions in your React application.
Element Variables
By using variables to store elements in your React component, you can selectively render certain elements based on certain conditions while keeping the rest of the output unchanged.
Here are two new components that represent the Logout and Login buttons:
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}Now, we will make a stateful component called LoginControl.
What it will do, it will render <LoginButton /> or <LogoutButton>. It depends on its current state. Also, it will render <greeting /> from the last example.
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<LoginControl />);Various techniques can be used to render components in React concisely and conditionally. In addition to using variables and “if” statements, you can use shorter syntax options, such as inline conditions in JSX. Some examples of these techniques are explained below.
Inline If with the Logical “&&” Operator
JSX allows you to embed expressions by enclosing them in curly braces, which can include the JavaScript logical “&&” operator. It can be helpful for selectively rendering elements based on certain conditions. For example, you can use the “&&” operator to conditionally include an element in your JSX based on a specific situation.
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Mailbox unreadMessages={messages} />);In JavaScript, the “&&” operator can conditionally include an element in your JSX based on a specific condition. If the condition is actual, the element following && will be rendered. If the condition is false, the element will be ignored and skipped.
It’s important to note that even if the condition evaluates to a falsy value, the element following “&&” will still be skipped, but the falsy expression will be returned. For example, suppose the condition is false and the element following “&&” is <div>0</div>. In that case, the render method will return “0”. This behavior can be helpful for selectively rendering elements based on certain conditions in your React components.
render() {
const count = 0;
return (
<div>
{count && <h1>Messages: {count}</h1>}
</div>
);
}Switch Statement
In addition to using the conditional operator, you can also use a “switch” statement to control the rendering of components based on various conditions in your React application. A “switch” statement allows you to specify different blocks of code to be executed for other conditions, similar to an “if-else” statement.
However, a switch statement can be more practical to use when you need to handle more than two possible outcomes.
render() {
switch (this.state.mode) {
case 'edit':
return <EditMode />;
case 'view':
return <ViewMode />;
default:
return <DefaultMode />;
}
}The “switch” statement in this code determines which component to render based on the value of “this.state.mode”. If “this.state.mode” is ‘edit,’ the <EditMode /> component will be rendered. If “this.state.mode” is ‘view,’ the <ViewMode /> component will be generated. The <DefaultMode /> component will be rendered if both situations are met.
Using a switch statement, you can concisely control the rendering of components based on various conditions in your React application.
Inline If-Else with Conditional Operator
An alternative method for conditionally rendering elements inline is using the JavaScript conditional operator, expressed as “condition ? true: false.” This operator allows you to specify a condition, and if the state is actual, the expression preceding “?” will be returned; otherwise, the expression following: will be returned. It can be a valuable tool for concisely including or excluding elements based on certain conditions in your React components.
In the example below, we will use it to render a small text or block conditionally.
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently': 'not'}</b> logged in.
</div>
);
}We can also use it for more significant expressions, which can be challenging to understand.
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn
? <LogoutButton onClick={this.handleLogoutClick} />
: <LoginButton onClick={this.handleLoginClick} />
}
</div>
);
}
In React, it is up to you and your team to decide on the most readable and maintainable style for writing code. When working with conditional rendering, consider the complexity of your conditions and whether extracting a component to handle the logic would be more appropriate.
Just like in JavaScript, it is essential to choose an understandable and scalable style and refactor your code to keep it organized and maintainable.
Conditional Rendering with Enums
Enums are JavaScript objects that map keys to values, and they can be used in various ways in your React application. One way to use enums is to create conditional rendering statements, similar to how you would use a “switch” statement.
For example, consider the following code that uses an enum to determine which component to render based on the value of the “mealType” property:
const MealType = {
SOUP: 'soup',
LASAGNA: 'lasagna',
BURGER: 'burger',
PIZZA: 'pizza',
};
render() {
switch (this.state.mealType) {
case MealType.SOUP:
return <Soup />;
case MealType.LASAGNA:
return <Lasagna />;
case MealType.BURGER:
return <Burger />;
case MealType.PIZZA:
return <Pizza />;
default:
return null;
}
}In this code, the “MealType” enum defines four named constants: “SOUP,” “LASAGNA,” “BURGER,” and “PIZZA.” The switch statement uses the “MealType” enum to determine which component to render based on the current value of “this.state.mealType”. If “this.state.mealType” is “MealType.SOUP”, the <Soup /> component will be rendered. If “this.state.mealType” is “MealType.LASAGNA”, the <Lasagna /> component will be generated. The render method will return null if neither of these situations is met.
The enum method is more readable than the “Switch” statement.
Higher-Order Components (HOC)
Higher-order components (HOCs) are a powerful React technique that allows you to reuse component logic and extend the functionality of existing components. HOCs take a current component and return a new one with added functionality. They can implement complex logic and behaviors in your React application.
One advantage of using HOCs is that they can handle multiple cases and conditions, making them a flexible and powerful tool for building dynamic user interfaces. For example, consider the following code that uses a HOC to show either a component or a loading indicator:
function withLoadingIndicator(Component) {
return function WithLoadingIndicator(props) {
if (props.isLoading) {
return <LoadingIndicator />;
}
return <Component {...props} />;
}
}In this code, the “withLoadingIndicator” HOC takes an existing component (Component) as an argument and returns a new component that wraps it with added functionality. If the “isLoading” prop is true, the HOC will render a <LoadingIndicator /> component. If the “isLoading” prop is false, the HOC will render the original component with the provided props.
HOCs can be a powerful tool for building dynamic and reusable components in your React application. They are worth exploring in more depth if you are interested in advanced React techniques.
Preventing Component from Rendering
Sometimes, a component does not render itself, even though another element is called it. In these cases, you can return null instead of the component’s render output to prevent it from being displayed.
For example, consider the following code, in which the <WarningBanner /> component is rendered based on the value of the warn prop. If the value of the warn prop is false, the <WarningBanner /> component will not be rendered:
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(state => ({
showWarning: !state.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Page />);It’s important to note that returning “null” from a component’s “render” method will not prevent the component’s lifecycle methods from being called. For example, the “componentDidUpdate” method will still be invoked even if “null” is returned from the “render” method. This behavior can be helpful in some instances, such as when you want to perform logic or updates within the component without displaying the element to the user.
This ultimate guide to conditional rendering in React has given you the knowledge and inspiration to create dynamic and interactive components in your projects.
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn More
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Ultimate Guide to Conditional Rendering in React was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Quokka Labs
Quokka Labs | Sciencx (2023-02-06T17:02:52+00:00) Ultimate Guide to Conditional Rendering in React. Retrieved from https://www.scien.cx/2023/02/06/ultimate-guide-to-conditional-rendering-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.