React JS - setState doesn't update the state immediately

I would like to ask why my state is not changing when I do an onclick event. I've search a while ago that I need to bind the onclick function in constructor but still the state is not updating. Here's my 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 }); // After setting a new state it still return a false value console.log(this.state.boardAddModalShow); } render() { return ( <Col lg={3}> <a
href="javascript:;"
className={style.boardItemAdd}
onClick={this.openAddBoardModal}
> <div
className= {[
style.boardItemContainer,
style.boardItemGray].join(' ')
]}
> Create New Board </div> </a> </Col> ) } } export default BoardAdd

Write your answer...

It's not the same without you

Join the community to find out what other Ednsquare users are discussing, debating and creating.