setState of an array to the values of another array

Question

I have the following data structure:

        this.state = {
        client: {
            abilities: [],
        },
        abilitiesDisplay: [],

and I am trying to set state of the client abilities empty array to abilitiesDisplay array, which has been mutated in the code and now has two items.

My set state function is as follows:

EDIT: the client and abilitiesDisplay are declared earlier in the function:

    const {
        client,
        abilitiesDisplay
    } = this.state;


           this.setState(() => ({
                client: {
                    ...this.state.client,
                    abilities: [
                        ...client.abilities,
                        abilitiesDisplay
                    ],
                }
            }))

The set state is not working in this case and client.abilities is still and empty array. Is the error obvious?

Please provide a complete example. Your second code snippet refers to variables named client and abilitiesDisplay without showing their declarations nor initializations. — Code-Apprentice
– Code-Apprentice, Commented Nov 8, 2018 at 19:49
@Code-Apprentice: thank you for the comment, I have updated the code block — ksenia
– ksenia, Commented Nov 8, 2018 at 19:57
What are the values of client.abilities and abiaitiesDisplay? — Code-Apprentice
– Code-Apprentice, Commented Nov 8, 2018 at 20:10

Tholle · Accepted Answer · 2018-11-08 20:03:17Z

1

If you want to add the elements of the abilitiesDisplay array to the client.abilities array, you can create a new array that contains all the elements in both arrays by spreading them both.

Example

class App extends React.Component {
  state = {
    client: {
      abilities: ["baz"]
    },
    abilitiesDisplay: ["foo", "bar"]
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState(previousState => ({
        client: {
          abilities: [
            ...previousState.client.abilities,
            ...previousState.abilitiesDisplay
          ]
        }
      }));
    }, 2000);
  }

  render() {
    return <div>{JSON.stringify(this.state)}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

edited Nov 8, 2018 at 20:03

answered Nov 8, 2018 at 19:47

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

13 Comments

Tholle Over a year ago

@ksenia You're welcome! Ah, I misunderstood your question. I have updated the answer.

Tholle Over a year ago

@ksenia I'm not sure I understand. Doesn't it work like you intended if you press "Run the snippet"? It doesn't matter if one of the arrays are empty, it will still work.

Tholle Over a year ago

@ksenia Don't use push. That will mutate the state. Sorry, are you saying my example is broken? I don't understand. Are you really spreading both arrays?

Tholle Over a year ago

@ksenia client.abilities is a reference to the old array. Write this.client.abilities to get the new one instead.

Tholle Over a year ago

@ksenia Great! You're welcome. Again, use this.client instead. You are never mutating data in React/Redux, so you can't use old references.

|

weibenfalk · Accepted Answer · 2018-11-08 20:03:37Z

1

Try this =)

this.setState((prevState) => ({
  client: { 
    abilities: [ ...this.prevState.abilitiesDisplay ]
  }
}));

I assume that you don't want to keep the old values in the abilities by your information above.

answered Nov 8, 2018 at 20:03

weibenfalk

9027 silver badges10 bronze badges

Comments

rassar · Accepted Answer · 2018-11-08 20:17:05Z

0

You need this.state.abilitiesDisplay.

edited Nov 8, 2018 at 20:17

rassar

5,7103 gold badges29 silver badges46 bronze badges

answered Nov 8, 2018 at 19:47

victor zadorozhnyy

9771 gold badge13 silver badges27 bronze badges

1 Comment

rassar Over a year ago

Can you elaborate on your answer?

Collectives™ on Stack Overflow

setState of an array to the values of another array

3 Answers 3

13 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related