How to use callback function inside setState function

Question

I have simple click handler and it works in this case:

        handleClick = () => {
            const { isCalendarOpen } = this.state;

            this.setState ({ isCalendarOpen: !isCalendarOpen });
        };

But I must use callback function in setState, so I try this way:

       this.setState(state => ({
           isCalenderOpen: !state.isCalenderOpen
       }));

It's not wirking :( can someone suggest how to solve the problem?

"t's not wirking :(" not working how? How do you check it is working? Remember setState is async. — Yury Tarabanko
– Yury Tarabanko, Commented Dec 10, 2018 at 8:13
Also you have a typo isCalend**e**rOpen vs isCalend**a**rOpen — Yury Tarabanko
– Yury Tarabanko, Commented Dec 10, 2018 at 8:13

Umair Farooq · Accepted Answer · 2018-12-10 08:22:06Z

2

In setState, second argument is the callback function which will be called after state has been set. The first argument is either the object to which state would be updated or a function which will return the updated state. In both of your cases you are updating the state. It should be

this.setState ({ isCalendarOpen: !isCalendarOpen }, () => {
  // callback function
});

or

this.setState(state => ({
       isCalenderOpen: !state.isCalenderOpen
   }), () => {
  // callback function
});

answered Dec 10, 2018 at 8:22

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use callback function inside setState function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related