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
– Vivick

2018-07-30 13:09:04 +00:00
Commented Jul 30, 2018 at 13:09 — Vivick
– Vivick, Commented Jul 30, 2018 at 13:09

Tholle · Accepted Answer · 2018-07-30 13:05:06Z

1

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);
    }
  );
}

answered Jul 30, 2018 at 13:05

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2018-07-30 13:04:32Z

1

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, 2018 at 13:04

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

mojtaba1 Over a year ago

thank you very much my dear friend. that was a great help. thanks

Shubham Khatri Over a year ago

@mojtaba1 Glad to have helped :-)

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related