4 Methods to Add Conditional Attributes to React Components
Different methods and best practices of using conditional attributes or props with React
Today, conditional attributes are widely used with React to provide dynamic behaviors. But, most developers are not aware of all the methods that can be used to implement them.
So, in this article, I will discuss different methods and best practices of using conditional attributes or props with React.
Rendering Conditional Attributes in React
Before moving to the implementation, we should understand how React’s underlying architecture renders conditional attributes.
In JavaScript, setting an attribute to a false value will cause that specific attribute to be removed from the DOM. If we set an attribute to null, undefined, or false, that attribute will be removed from the DOM.
For example, if we set an attribute to null, undefined, or false, that attribute will be removed from the DOM.
const required = true;
const disabled = false;return <input type="text" disabled={required} required={disabled}/>;
The above code accepts 2 props for the input tag, and since the required attribute is set to false, it will be omitted when the component is rendered.
<input type="text" disabled>Now, let’s look into various approaches in implementing conditional attributes in a React application.
if Statement
Using if-else statements is one of the easiest ways to implement conditional attributes. It is pretty much straightforward and readable.
Consider the following example where the input field is disabled for users who have the role ‘Student’. The role will be checked from the user object, and the input element will be manipulated accordingly.
But this approach is not suitable if we have several attributes since we should create variables for each attribute.
Further, the code length keeps growing with the increasing number of variables and conditions.
Ternary Operator
The ternary operator is an inline conditional operator which takes three arguments. It allows us to wrap our conditions to a single line where the first argument will be a condition. The other arguments will execute respectively if the condition is true or false.
Although this approach reduces the number of code lines, it can also reduce the readability when the number of attributes increases.
&& Operator
The usage of && operator is much similar to the previous ternary approach. && is a logical operator that allows a condition on the left side and the output on the right side. The output will execute if the condition is a truthy, or else the output will become false.
Using && is more compact than the ternary operator. It is also less complex compared to the ternary operator approach.
Spread Operator
This method is one of my favorites when it comes to conditional props.
The Spread Operator is used when passing all the properties of an object or all the elements of an array to a React Component.
Here, I have used the attributes object to store all the required attributes of the input field. This makes it much easier to handle the code because all the attributes will be handled inside an object.
Imagine using our first approach with ‘if’ statement for this scenario,
Now we are flooded with variables, and code handling will be a tedious task. However, using inline operators will still worsen the case compared to the spread operator.
So sometimes you might even end up with Spaghetti!
Build better Component Libs and Design Systems
Share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint.
OSS Tools like Bit offer a great dev experience for building, sharing, and adopting components across teams and applications.
Learn more here:
Final Words
This article discussed four major approaches to adding conditional attributes or props to React Components. You can use any of the methods depending on your preference. But we should first consider our requirements.
Using ‘if’ statements is the most straightforward approach if you don’t like to get bothered with more complex JavaScript syntax. If code complexity and readability are not a matter of your concern, you can move on with conventional ‘if’.
The inline ternary and && operators are useful if you are dealing with fewer attributes.
Finally, the spread operator has more flexibility compared to other approaches. I would personally prefer the spread operator when it comes to conditional rendering. What is yours?
Thank you for Reading!
Build React Apps with reusable components, just 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:
