Skip to content
Related Articles

Related Articles

How to conditionally add attributes to React components?
  • Last Updated : 05 Jan, 2021

We can conditionally add attributes to React components with the following approaches:

Approach 1: 

Evidently, with some attributes, React is smart enough to omit the attribute if the value you pass to it is not truthy. For example:

state= {
  disabled: false,
  required: true
}

return (
   <input type="text" disabled={disabled} required={required}  />
);

Above Syntax will result in the following output:

<input type="text" required>

Creating React Application:



Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure: It will look like the following.

Approach 2: We can use the below syntax:

state {
   condition: true
}

return (
 <Button {...(condition ? {className: 'btn btn-primary'} : {})} />
);

Depending on the value of condition either the {className: ‘btn btn-primary’} or {} will be returned. The Spread Operator will then spread the returned object properties to the Button component. In the falsy case, because the returned object has no properties, nothing will be passed to the component.

Approach 1:

Javascript




import React, { Component } from "react";
class App extends Component {
  
  state = {
    disabled: true,
    text: "Make it Unable"
  }
    
  updateState = () => {
    let text = !this.state.disabled ? "Make it Unable" : "Make it Disable";
    this.setState({ disabled: !this.state.disabled, text: text })
  }
  
  render() {
    return (
      <div>
        <input type="text" disabled={this.state.disabled} />
        <button
          onClick={this.updateState}>
          {this.state.text}
        </button>
      </div>
    );
  }
}
  
export default App;

Output:

Approach 2:

Javascript




import React, { Component } from "react";
class App extends Component {
  
  state = {
    condition: true
  
  }
    
  updateState = () => {
    this.setState({ condition: !this.state.condition })
  }
  render() {
    return (
      <div>
        <button
          {...(this.state.condition ? { className: 'btn btn-primary' } : {})}
          onClick={this.updateState}>
          click
            </button>
      </div>
    );
  }
}
  
export default App;

Output: 

My Personal Notes arrow_drop_up
Recommended Articles
Page :