¿Cómo agregar condicionalmente atributos a los componentes de React?

Podemos agregar condicionalmente atributos a los componentes de React con los siguientes enfoques:

Enfoque 1: 

Evidentemente, con algunos atributos, React es lo suficientemente inteligente como para omitir el atributo si el valor que le pasa no es verdadero. Por ejemplo:

state= {
  disabled: false,
  required: true
}

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

La sintaxis anterior dará como resultado el siguiente resultado:

<input type="text" required>

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Enfoque 2: Podemos usar la siguiente sintaxis:

state {
   condition: true
}

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

Según el valor de la condición, se devolverá {className: ‘btn btn-primary’} o {}. El Operador de extensión luego extenderá las propiedades del objeto devuelto al componente Botón. En el caso falso, debido a que el objeto devuelto no tiene propiedades, no se pasará nada al componente.

Enfoque 1:

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;

Producción:

Enfoque 2:

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;

Producción: