Conditionally add attributes to React components

In this article, we will show you how to conditionally add attributes to React components. There are multiple ways to dynamically add attributes to a React element but we will show you the best way out of them.

Checkout more articles on ReactJS

• How to add an icon in the react-select dropdown
• How to add a Progress Bar in React
• How to add a loading in React AG Grid
• Test an onClick event using the React Testing Library
• How to add Google Analytics to the React App

Create an object the way you like.

var inputProps = {
  cols: "50",
  onChange: this.handleChange
};

if (condition)
  inputProps.rows = "4";

Render with a Spread Operator, optionally passing other props also.

<textarea name="cluemediator" {...inputprops}=""></pre><p></p><p>This approach is actually very useful, especially when adding many properties conditionally.</p>
<p>I hope you find this article helpful.<br />Thank you for reading. Happy Coding..!! 🙂</p>
<!-- /wp:html --></textarea>