I have a React application and want to change a CSS class when one condition is met or another. How do I do this?
So, if validation or validationNoExist is false then the CSS class should be input-form-validation-wrong, if both are correct then the first class is selected.
Here is my code:
<input type="email" className={validation || validationNoExist ? 'input-form' : 'input-form-validation-wrong'} placeholder="E-Mail" />
<input type="email" className={(validation || validationNoExist) ? 'input-form' : 'input-form-validation-wrong'} placeholder="E-Mail" />This may just be an issue of grouping the logical operator so they are evaluated as a unit for the condition test for the ternary. They both need to be true for the ternary to return "input-form".
<input
type="email"
className={(validation && validationNoExist) ? 'input-form' : 'input-form-validation-wrong'}
placeholder="E-Mail"
/>
console.log((false && false) ? 'input-form' : 'input-form-validation-wrong');
console.log((true && false) ? 'input-form' : 'input-form-validation-wrong');
console.log((false && true) ? 'input-form' : 'input-form-validation-wrong');
console.log((true && true) ? 'input-form' : 'input-form-validation-wrong');