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,510 points
2,125 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,720 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,720 points
5,587 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,720 points
128 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,720 points
223 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,720 points
103 views
0 votes
1 answer

From php returning JSON to JavaScript

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

answered Jun 4, 2020 in Java-Script by Niroj
• 82,720 points
210 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,720 points
1,384 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,720 points
3,799 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,720 points
1,566 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,720 points
380 views