This content originally appeared on DEV Community and was authored by Kuldeep Tarapara
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.
This content originally appeared on DEV Community and was authored by Kuldeep Tarapara
Kuldeep Tarapara | Sciencx (2022-07-19T12:37:16+00:00) How to Conditionally Add Attributes to React Components?. Retrieved from https://www.scien.cx/2022/07/19/how-to-conditionally-add-attributes-to-react-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.