React: Toggle only one class without affecting the existing class

Question

I have an input field where has 'from-control' class:

<input
      name="title"
      className="form-control"
      type="text"
      placeholder="Write title..."
      value={this.state.title}
      onChange={this.onChange}
/>

Now I want to toggle 'form-control-danger' class without affecting 'form-control' class (when the this.state.error is true or false )

note: I already searched in Google & StackOverflow but didn't find the right solution

Here is my full code in snippet:

 class PostForm extends React.Component { constructor(props) { super(props) this.state = { title: '', body: '', fetching: false, error: false } } onChange = e => { this.setState({ [e.target.name]: e.target.value }) } handleFormSubmit = (e) => { e.preventDefault() if (!this.state.title || !this.state.body) { this.setState({ error: true }) return false; } this.setState({ fetching: true }) fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: this.state.title, body: this.state.body }), headers: { 'Content-type': 'Application/json' } }) .then(res => res.json()) .then(res => { console.log(res) this.setState({ fetching: false, title: '', body: '', error: false }) }) } render() { return ( <div className="container"> <div className="row justify-content-center"> <div className="col-8"> <form onSubmit={this.handleFormSubmit}> <div className="form-group"> <label>Post Title:</label> <input name="title" className="form-control" type="text" placeholder="Write title..." value={this.state.title} onChange={this.onChange} /> </div> <div className="form-group"> <label>Post Body:</label> <textarea name="body" className="form-control" placeholder="Write body text..." value={this.state.body} onChange={this.onChange} ></textarea> </div> <div className="form-group"> <button type="submit" className="btn btn-success" > { this.state.fetching ? 'Fetching Post' : 'Submit' } </button> {this.state.error && 'title or content cannot be empty'} </div> </form> </div> </div> </div> ) } } ReactDOM.render(<PostForm />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <div id="app"></div> 

Answer 1

Something like this?

<input
      name="title"
      className={this.state.error ? "form-control form-control-danger" : "form-control"}
      type="text"
      placeholder="Write title..."
      value={this.state.title}
      onChange={this.onChange}
/>