Error setState doesn t update the state immediately

0 votes

 When I do an onclick event. I have 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>

How to fix this error?

Jun 4, 2020 in Angular by kartik
• 37,530 points
3,054 views

1 answer to this question.

0 votes

Hello @kartik,

The method setState() takes a callback. And this is where we get updated state.

Consider this example.

this.setState(
    { name: "Mustkeom" },
      () => {                        //callback
        console.log(this.state.name) // Mustkeom
      }
);

So When callback fires, this.state is the updated state.
You can get mutated/updated data in callback.

Hope it help!!

answered Jun 4, 2020 by Niroj
• 82,820 points

Related Questions In Angular

0 votes
1 answer

How to update nested state properties in React

Hello @kartik, In order to setState for a nested object ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,820 points
6,828 views
0 votes
1 answer

What are the type of $watch()?

hey kartik, Before you move in to the ...READ MORE

answered Feb 3, 2020 in Angular by Niroj
• 82,820 points
160 views
0 votes
1 answer

What is the use of $eval in alert()?

Hey, kartik!! There is not much difference in ...READ MORE

answered Feb 4, 2020 in Angular by Niroj
• 82,820 points
300 views
0 votes
1 answer

What is the difference between Call back transclusion function and no call back transclusion function?

Hey,    There is no difference between clone linking and ...READ MORE

answered Feb 5, 2020 in Angular by Niroj
• 82,820 points
136 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,820 points
276 views
0 votes
1 answer

How to pass props to {this.props.children}?

Hello @kartik,  Try using this: <div> ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,820 points
2,022 views
0 votes
1 answer

How do I conditionally add attributes to React components?

Hello @kartik, For certain attributes, React is intelligent ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,820 points
5,233 views
0 votes
1 answer

Error: Cannot read property 'setState' of undefined

Hello @kartik, This is due to this.delta not being bound ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,820 points
1,788 views
0 votes
1 answer

Error:Uncaught TypeError: Cannot read property 'setState' of undefined

Hello @kartik, This is due to this.delta not being bound ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,820 points
448 views