react-native update object using setState

Question

Is it possible to update object using setState? I tried this code:

import moment from 'moment';

constructor() {
    super();
    this.state = {
      pressedDate:{
      },
    }
  }

updateState = (day) => {
    let updateDay = moment(day.dateString).format(_format);
    //When I console.log updateDay, I get this '2019-06-30' 
    console.log(updateDay,'updateDay')

   //I want to update pressedDate with updateDay which is '2019-06-30' 
    this.setState({
      pressedDate:{
         updateDay : {dots: [vacation, massage, workout], selected: true}
      }
    })
  }

I am trying to update my object with updateDay but nothing happens when I run this code.

What makes you think nothing happens? Something definitely happens, you replace this.state.pressedDate with a new object. Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. (I realize you're using React Native, but a React example would be close enough to show the problem and let people help you with it.) — T.J. Crowder
– T.J. Crowder, Commented Jun 10, 2019 at 9:34

T.J. Crowder · Accepted Answer · 2019-06-10 09:37:40Z

1

You've said "nothing happens," but that code clearly replaces this.state.pressedDate with a new object with just the updateDay property.

If you meant to add/update updateDay without completely replacing pressedDate (that is, if it has other properties), you'd do that by making a copy and then updating the copy. The idiomatic way to do that uses property spread:

this.setState(({pressedDate}) => ({
    pressedDate: {
       ...pressedDate,
       updateDay : {dots: [vacation, massage, workout], selected: true}
    }
}));

Two key things to note there:

It's using the callback version of setState. Because state updates are asynchronous, you must use the callback version whenever setting state (an updated pressedDate) based on existing state (the rest of pressedDate other than updateDay).
...pressedDate spreads out the properties of the current version into the new object being created. Then we add updateDay, which will overwrite any previous one.

answered Jun 10, 2019 at 9:37

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

kirimi Over a year ago

Thanks for the answer. I think you are right but I have one issue. When I said nothing happens I meant updateDay which is 2019-06-30 isn't replaced when I called setState. In fact, when I console.log(this.state.pressedDate) after I follow your code, it still don't replace updateDay with '2019-06-30'.

T.J. Crowder Over a year ago

@kirimi - That's because state updates are asynchronous. But updating state will make React re-render your component (also asynchronously). If you needed a callback when the state has been updated, you can give a second function to setState, details here.

Collectives™ on Stack Overflow

react-native update object using setState

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related