How to Conditionally Add Attributes to React Components?
Tags: react, programming, tutorial
Published: 2022-07-19 12:37:16

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.

```javascript
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

```javascript
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**

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

<strong>App.js</strong>

```javascript
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

```javascript
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.