title: reactjs setState not changing state
body: <p>I have a function(onClickAddSection),  when its called, it should set the state to empty string but it doesn't do that at all.
  Please take a look at the code and tell me what im doing wrong thank you.</p>
  
  <pre><code>class AddNewSectionForm extends Component {
  constructor(props) {
      super(props);
      this.state = {
          sectionName: '',
          validation:false
      };
      this.onSectionNameChange = this.onSectionNameChange.bind(this);
      this.onClickAddSection = this.onClickAddSection.bind(this);
  
  }
  
  onSectionNameChange(event) {
      if(this.state.validation==false){
          this.setState({validation:true});
      }
      this.setState({sectionName: event.target.value});
  }
  
  onClickAddSection(event) {
      event.preventDefault();
      this.props.saveSection(this.state.sectionName);
      this.setState({sectionName:'',validation:false});
  }
  
  render() {
      return (
              &lt;div&gt;
                  &lt;TextInput name="newSection" label="Section Name :"
                             onChange={this.onSectionNameChange}
                             value={this.state.sectionName}
                             error = {this.state.validation==true&amp;&amp; this.state.sectionName.length==0?'Enter Section Name':''}/&gt;
                  &lt;AddCloseButtons add = {this.onClickAddSection}
                                   close = {this.props.closeCharm}
                                   /&gt;
              &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>the onClickAddSection function doesn't set the sectionName back to ''. </p>
  
  <p>AddCloseButton:</p>
  
  <pre><code>const AddCloseButtons = ({add,close}) =&gt; {
  return (
      &lt;div className="form-group"&gt;
          &lt;button className="btn btn-primary" style={{width: '40%', border:'solid black 1px'}} onClick={add}&gt;Add&lt;/button&gt;
          &lt;button className="btn btn-secondary" style={{width: '40%', float: 'right',border:'solid black 1px'}} onClick={close}&gt;Close&lt;/button&gt;
      &lt;/div&gt;);
  </code></pre>
  
  <p>};</p>