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,520 points
5,088 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,880 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,880 points
9,109 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,880 points
937 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,880 points
1,270 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,880 points
628 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,880 points
1,003 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,880 points
3,477 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,880 points
8,731 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,880 points
3,343 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,880 points
1,243 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP