React native setState updates array with empty object

Question

I have a class constructed as follows -:

  constructor(props) {
    super(props);
    this.state = {
      name: '',
      guestsStore:[],
    };
  }

And I have a form that takes a text input and that is supposed to add the submitted name to the guestsStore array by calling this.handleNameSubmit

The following code doesn't work even if I have seen it in multiple code examples. It updates state but with an empty object-:

  handleNameSubmit = (name) => {
    this.setState({
      guestsStore: [...this.state.guestsStore, name],
    });
  };

The following code works and updates state with the name.

handleNameSubmit = (name) => {
    this.setState({
    guestsStore:[...this.state.guestsStore, {name:this.state.name}],
    })
  }

I am new to React Native and would like to understand why this happens. Why in this case does the first code example fail even if it works in so many other cases

What are you expecting state to look like after the call to handleNameSubmit? — ksav
– ksav, Commented Mar 5, 2020 at 4:44
How does name get passed to handleNameSubmit? How is handleNameSubmit called? Also, not an answer to your question but you shouldn't use this.state in setState because updating of state can be deferred and create unexpected results, use "prevState". ie. this.setState((prevState, props) => ... — user6572277
– user6572277, Commented Mar 5, 2020 at 4:44
@ksav I expect an array of guest objects: [{name:guest 1}, {name:guest 2}] — Kat
– Kat, Commented Mar 5, 2020 at 12:02
@rshepp on button press in the form that takes text input for name. — Kat
– Kat, Commented Mar 5, 2020 at 12:35

Evgenii Klepilin · Accepted Answer · 2020-03-05 04:58:05Z

1

These two approaches accomplish different things.

 handleNameSubmit = (name) => {
     this.setState({
         guestsStore: [...this.state.guestsStore, name],
     });
 };

This code adds field name: name to the expanded array this.state.guestsStore, and then assembles the array into guestsStore of the new state.

handleNameSubmit = (name) => {
    this.setState({
        guestsStore:[...this.state.guestsStore, {name:this.state.name}],
    })
}

This code adds object {name: this.state.name} with a field to the expanded array this.state.guestsStore and then assembles it into guestsStore field of a new state.

You need to make sure you understand the difference between the two and use the one that you need in your case.

answered Mar 5, 2020 at 4:58

Evgenii Klepilin

6952 gold badges8 silver badges21 bronze badges

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

2 Comments

Kat Over a year ago

Thank you so much Evgenii! Your description makes the distinction clear — I see why I had to pass an object with its field in the second case because the array started out empty without a data structure. When I tried the first case on fetched data that was already structured, it worked!

Evgenii Klepilin Over a year ago

@Kat Happy to help :)

Collectives™ on Stack Overflow

React native setState updates array with empty object

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