Can I add new class inside the same element using jsx?

Question

What I mean, is there a way to write sth like this?

<input
        className="form-control"
        onChange={() => { 
          this.classList.add('is-valid');  //where this is input element
        }}
      />

Answer 1

You can use a local state (useState) and conditional expression as shown below:

function App() {

  const [isValid, setIsValid] = useState(false);

  return (<input
    className={'form-control' + (isValid ? ' is-valid' : '')}
    onChange={() => {
      setIsValid(true);
    }}
  />)
}