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?