map is not a function ERROR after using push on an array in REACT

Question

I pushed an element to an array in a function( event), after pushing this element to the array I am getting this error,

handleAddList(s) {
  this.setState({lists :this.state.lists.push(s) });
  console.log(this.state.lists);
}

lists.map is not a function. list a react component

if I write it as this

handleAddList(s) {
  this.setState({lists :['something','something else']});
  console.log(this.state.lists);
}

But when I define lists manually it works well. Just when I push a new element in the array I get this error. Also if push destroys the array. Best regards

Using concat instead of push would do the trick – Vivick Jul 30 '18 at 13:09 — Vivick, Jul 30 '18 at 13:09

score 1 · Accepted Answer · answered Jul 30 '18 at 13:05

The result of push is the length of the array, which is not what you want. You want to create a new array with the new object in it instead:

handleAddList(s) {
  this.setState(
    previousState => {
      return { lists: [...previousState.lists, s] };
    },
    () => {
      console.log(this.state);
    }
  );
}

score 0 · Answer 2 · answered Jul 30 '18 at 13:04

0

push returns the length of the array after appending the element and not an array, what you need is concat

handleAddList(s) {
    this.setState({lists :this.state.lists.concat([s]) });
}

Also setState doesn't update the state immediately You would need to use callback like

handleAddList(s) {
    this.setState({lists :this.state.lists.concat([s]) }, () => { console.log(this.state.lists)});
}

answered Jul 30 '18 at 13:04

Shubham Khatri

270,417
55
406
400

thank you very much my dear friend. that was a great help. thanks – mojtaba1 Jul 30 '18 at 13:12
@mojtaba1 Glad to have helped :-) – Shubham Khatri Jul 30 '18 at 13:13

map is not a function ERROR after using push on an array in REACT

2 Answers2