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 & share independent React components with Bit

Bitis an extensible tool that lets you create truly modular applicationswith independently authored, versioned, and maintained components.

Use it to build modular apps & design systems, author and deliver micro frontends, or share components between applications.

Final Words

This article discussed four major approaches in 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 !!!