How can I setState and push to an array?

Question

this is my state:

class table extends Component {
  state = {
    arr: [],
    numofSub: 1
  };

I wish to push an object to the arr with set state through fetch from my database, the fetch works great I console logged it, I just cant seem to push the object inside the array:

componentWillMount() {
    fetch('/api/items')
      .then(data => data.json())
      .then(inputs => this.setState({ arr: [...inputs] }));

  }

thank you for your reply, I tried that and I get an empty array when I console log the state, like so: [] length: 0 <prototype>: Array [] — Alexander
– Alexander, Commented Sep 22, 2018 at 18:08

Sagiv b.g · Accepted Answer · 2018-09-22 18:12:51Z

2

When next state is depended on previous state, is advised to use the functional setstate version:

componentWillMount() {
    fetch('/api/items')
      .then(data => data.json())
      .then(inputs => this.setState(state => ({ arr: [state.arr,...inputs] })));
  }

As for logging the changes right after setstate you should do that inside the setState's callback. because setState is asynchronous and may not be updated when you log the state:

this.setState(state => ({key:value}), () => {
  // this is the callback, its safe to log the updated state
  console.log(this.state);
});

answered Sep 22, 2018 at 18:12

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

2 Comments

Alexander Over a year ago

wonderful it works, I completely forgot it was asynchronous, thank you!

Sagiv b.g Over a year ago

@AlexAlex Glad i could help

Collectives™ on Stack Overflow

How can I setState and push to an array?

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