ReactJS: Best way to check state values and update render based on state?

So, I have a form with multiple inputs that update state onChange.

What I want to happen, is let the user change the values and when they change, update the the form's state to save these changes. My code using ES6 classes:

super(props);
 this.state = {
   post: this.props.content // this is an object {title: '', description: ''}
 }

 // I have all the methods below this.method = this.method.bind(this) up here.
}

handleTitle(title) { // gets title from input onChange event
  let post = update(this.state.post, {title: {$set: title}}); // using import update from 'immutability-helper' for changing object
  this.setState({ post });
  this.checkPostApproval();
} // this all works, post is updated. I have the same code for description.

checkPostApproval() {
  // here I want to check the post values and make sure they are valid.
  // and either allow or deny submission. 
  if (this.state.post['title'] && this.state.post['description']) {
    this.setState({isApproved: true});
  } else {
    this.setState({isApproved: false});
  }
} 

The problem:

When users set the title and then the description, isApproved switches to true (what I want). However, if the user then changes the title to "", the approval remains true (not what I want). If the user then starts typing in the description (the approval switches to false). I believe this has to do with the component lifecycle and when the state is being set, but I'm not sure.

I don't mind using jQuery to check for validation, but I was hoping to just check the values after the inputs change and then update the post using methods and props.

What is the best practices approach to updating an object in state and then validating it using onChange event handlers in various input fields?

Ultimately, I would like isApproved to be false, if there are any invalid inputs.