React add array to state array

Question

I am new to React. In my state, I am trying to have an empty array initialized to store polygons.

The structure I want to have is an array like this.state.polyList = [[dot1,dot2,dot3...],[dot1,dot2,dot3...]]

I am trying to have a

let newState = Object.assign({},this.state);
let newValue = [points]; // "points" is [dot1,dot2,dot3...]
console.log(newValue[0][0]); // able to print correctly
newState.polyList = newState.polyList.concat(newValue)
this.setState(newState)

However, when I later log the state.polyList, I only have a few empty array ([]) inside list

Since your state is nested, you need to do a deep clone to properly copy your state to prevent state mutation. Object.assign() doesn't do a deep clone. — Jayce444
– Jayce444, Commented Jan 22, 2020 at 5:36

akhtarvahid · Accepted Answer · 2020-01-22 05:34:27Z

1

You can add like this array to state array

 state = {
    items: [4,5,6],
  };

function to add

  handleClick = e => {
  this.setState({
   items:[...this.state.items,[Math.floor(Math.random()*100),7,8]]
   })
  };

answered Jan 22, 2020 at 5:34

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

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

Comments

Siva Kondapi Venkata · Accepted Answer · 2020-01-22 05:36:55Z

0

Change to something like below.

let newValue = [points]; // "points" is [dot1,dot2,dot3...]
console.log(newValue[0][0]); // able to print correctly

let newState = { ...this.state, 
                 polyList: [...this.state.polyList, newValue] };

this.setState(newState)

answered Jan 22, 2020 at 5:36

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Comments

Muhammad Zeeshan · Accepted Answer · 2020-01-22 05:49:12Z

0

Deep cloning in react doesn't work the way you are doing. A way that i prefer to use is by spread operator. You can do something like:

let newState = [...this.state.polyList];
newState.push(points)
this.setState({ polyList: newState });

Hope this works for you.

edited Jan 22, 2020 at 5:49

answered Jan 22, 2020 at 5:39

Muhammad Zeeshan

4,7784 gold badges18 silver badges42 bronze badges

2 Comments

Ramesh Reddy Over a year ago

Since an array is a reference type he is assigning the value even after he does concatenation newState.polyList = newState.polyList.concat(newValue) so that may not be the exact reason. Deep Clone might be as mentioned in the comments by jayce.

Muhammad Zeeshan Over a year ago

@Ramesh Yes, you are right. I will update my answer. Thanks.

TOLULOPE ADETULA · Accepted Answer · 2020-01-22 07:36:28Z

0

Best way to do this would be is structuring.

let oldState = [1,2,4]

this.setState ([...oldState, [new state array]])

answered Jan 22, 2020 at 7:36

TOLULOPE ADETULA

7981 gold badge12 silver badges28 bronze badges

1 Comment

J.Zh Over a year ago

thanks for noting. But it is still not working. The list turns to be all filled with empty arrays.

Collectives™ on Stack Overflow

React add array to state array

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related