How to Conditionally Add Attributes to React Components?

In React, adding attributes conditionally is frequently necessary. In React, it is pretty simple.

React is sophisticated enough to skip through some properties if the value you supply is untruthful. This is helpful, mainly when adding numerous characteristics conditionally. This post will teach us how to add attributes to React components conditionally.

React frequently uses conditional properties to offer dynamic behaviors. However, most developers are not familiar with all the available implementation techniques.

Therefore, this article will review many approaches and recommended practices for using conditional attributes or props with React. Also, check out best practices for react hooks.

var condition = true;
var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};
var component = <div { ...props } />;
Or its inline version
var condition = true;
var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

Rendering Conditional Attributes in React

We should comprehend how the fundamental architecture of React renders conditional attributes before going on to the implementation.

When an attribute in JavaScript is given a false value, the DOM will no longer include that particular attribute. An attribute will be deleted from the DOM if it is set to null, undefined, or false.

Example

const required = true;
const disabled = false;
return <input type="text" disabled={required} required={disabled}/>;

if Statement

Adding inline conditionals inside might be acceptable if there are only one or two properties. However, if a React component has too many, it could become cumbersome and difficult to read.

Login.js

import React from "react";
const Login= props => {
  let { isLoggedIn } = props;
  if (isLoggedIn) {
    return <button>Logout</button>;
  } else {
    return <button>Login</button>;
  }
};
export default Login;

App.js

import React, { Component } from "react";
import './App.css';
import Login from "./Login";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true
    };
  }
  render() {
    return (
      <div className="App">
        <h1>
          Welcome to, BOSC Tech Labs Private Limited
        </h1>
        <Login isLoggedIn={isLoggedIn} />
      </div>
    );
  }
}

Ternary Operator

The ternary operator is a three-argument inline conditional operator. It enables us to condense our conditions into a single line, with the condition as the first argument. The other arguments will run in turn if the condition is true or false.

condition ? exprIfTrue : exprIfFalse

Example

import React from 'react';

export default function App() {

  const Flowers = [
    { name: 'Rose' },
    { name: 'Orchid' },
    { name: 'Hyacinth' },
    { name: 'Lily' },
    { name: 'Tulip' },
  ]


  const FlowersList = true

    return (
      <div>
      {
        FlowersList ? (
          <div>
          <ul>
            {Flowers.map(Flower => 
                <li>{Flower.name}</li>)}
          </ul> 
          </div>
: (
          <p>No Flowers</p>
        )
      }

Conclusion

The different methods for adding conditional attributes or props to React Components were covered in this article. Depending on your preferences, you can use any of the techniques. But before anything else, let’s think about what we need.

If you don’t want to deal with more complicated JavaScript syntax, using “if” statements is the simplest solution.

You can continue using a traditional “if” if code complexity and readability are not an issue.