title: setState doesn't update the state immediately
body: <p>I would like to ask why my state is not changing when I do an <code>onClick</code> event. I've search a while ago that I need to bind the <code>onClick</code> function in constructor but still the state is not updating.</p>
  <p>Here's my code:</p>
  <pre><code>import React from 'react';
  import Grid from 'react-bootstrap/lib/Grid';
  import Row from 'react-bootstrap/lib/Row';
  import Col from 'react-bootstrap/lib/Col';
  import BoardAddModal from 'components/board/BoardAddModal.jsx';    
  import style from 'styles/boarditem.css';
  
  class BoardAdd extends React.Component {
      constructor(props) {
          super(props);    
          this.state = {
              boardAddModalShow: false
          };    
          this.openAddBoardModal = this.openAddBoardModal.bind(this);
      }
  
      openAddBoardModal() {
          this.setState({ boardAddModalShow: true }); // set boardAddModalShow to true
  
          /* After setting a new state it still returns a false value */
          console.log(this.state.boardAddModalShow);   
      }
  
      render() {    
          return (
              &lt;Col lg={3}&gt;
                  &lt;a href=&quot;javascript:;&quot; 
                     className={style.boardItemAdd} 
                     onClick={this.openAddBoardModal}&gt;
                      &lt;div className={[style.boardItemContainer,
                                       style.boardItemGray].join(' ')}&gt;
                          Create New Board
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/Col&gt;
          );
      }
  }
  
  export default BoardAdd
  </code></pre>