setState doesn't update the state immediately
<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>