2

En React quiero agregar una clase a mi ejemplo:

<input type="text" className={'form-control'} className={ isValid ? 'is-valid' : "is-invalid"}

Cuando mi state isValid sea valido, agregar la clase 'is-valid' o cuando no 'is-invalid'. cual es el objetivo de esto? de que al mismo tiempo quiero agregar la clase form-control por ejemplo:

<input type="text" className={ isValid ? 'is-valid form-control' : 'is-invalid form-control'}

Quisiera saber si hay alguna forma para manejar el agregado de esta clase ya que lo que requiero es no repetir la clase form-control en las 2 condiciones, como tengo en mente es realizarlo de la siguiente forma:

class MiComponentExample extends Component {

   render(){
    const myStyle = 'form-control ' + (isValid ? 'is-valid' : 'is-invalid');

    return(
    ...
    <input className = {myStyle} .... />
    ...
    )
   }
}

el ejemplo lo pongo porque en angular puedo manejarlo de la siguiente manera:

<input class="form-control" [ngClass]={ 'is-valid' : isValid , 'is-invalid': !isValid } />

& el resultado es que termina agregando la clase form-control, y una de las clases is-valid|is-invalid Que manera correcta podria utilizar para agregar clases como el ejemplo mostrado? o que manera utilizan para este tipo casos que se les presentan?

1 respuesta 1

1

Podrias utilizar un array de Strings & despues realizar un join()... juntar todos los elementos de el array por el valor de .join(' ') para que no ponga una ',' cuando se representen las clases.

<input
   className={[isValid ? 'is-valid':'is-invalid', 'form-control' ].join(' ')} .../>

Otra manera de realizarlo que se mira mas limpia es de la siguiente:

<input
   className={`form-control ${isValid ? 'is-valid':'is-invalid'}`} .../>

me gusta la manera en como se representa en Angular, pero tambien esta muy buena la manera de hacerlo en React.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.