setState of an array to the values of another array

setstate array of objects
react setstate array
react setstate array not working
react update object in array
react setstate nested array
react, ( usestate array)
usestate push to array
this setstate prevstate array

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?

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>

How to manage React State with Arrays, Learn how to manipulate arrays in React state by using JavaScript setState() method on a React component to update React's state. You can substitute the following examples for other arrays of primitives and arrays of objects. the start of the array by using const list = [state.value, state.list]; instead. The value variable is the actual value the user entered into that input field. To clarify let’s console.log the destructed variable, name for both input fields, first name and age.

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.

How to Add to an Array in React State using Hooks, The question is how do I add an item to the array in React State? useState returns a pair: the current state value and a function that lets you update it.” — React Docs. Put another way, state should be considered immutable in React and Use useState([]) Hook to set state to [] and get state setter function  In this case, a shorthand arrow function is used to increase the integer in the array by one. Each item in the array is affected by this update once you click the button. As you can see, the array map method works wonders here. Basically it's a array replace for each item in the array.

You need this.state.abilitiesDisplay.

Using the Spread syntax in React Js to set state array of object, then i stated playing with other options and watch what's happening . this.​setState({ cars: [ this.state.cars, carArray ] }). and this  useState returns an array with 2 elements, and we’re using ES6 destructuring to assign names to them. The first element is the current value of the state, and the second element is a state setter function – just call it with a new value, and the state will be set and the component will re-render.

React/ReactJS: Update an Array State, A step-by-step guide on updating/removing array state elements in React/​ReactJS. inside the setState() method will work only when you assign an array as a whole. But what happens when you want to add another element after 'A' ? What if we need to replace an array element at index i with a different value? Consider the below state variable countries which is an array consisting of three elements: China, Cambodia and Myanmar . constructor(props) { super(props); this.state = { countries: ['China', 'Cambodia', 'Myanmar'] } } Suppose you want to change the first element China (programatically); you want to replace it with some other value, say, Brunei.

Best way to update an array of state? React, Should I be pushing the new data to the array? a request, I would copy the previous state state and append the data from the request. because I think you can make another component to display the user's info and this setState ({ user: result }); }); }, render () { if ( !this.state.user ) return <p>Loading. I want to add to the array in React State, so it seems to make sense to try to .push() a new item to the end of the list, and thereby update state.. Unfortunately, the code searches.push() will

Immutability in React and Redux: The Complete Guide, Certain Array operations in JS are immutable (meaning that they A pure function must always return the same value when given the same inputs. a call to some other function that eventually calls setState or dispatch or  Convert Array of Arrays into Object with key-value pair in Javascript (Data from websocket) So in one of my project, I faced a challenge in JavaScript which i would like to share with you guys. The Challenge. From a websocket, I was getting the data in the multidimensional array i.e I was getting Array of arrays.

Comments
  • reactjs.org/docs/… You need to use state.client
  • @SLaks: thank you, could you elaborate? use it where?
  • Please provide a complete example. Your second code snippet refers to variables named client and abilitiesDisplay without showing their declarations nor initializations.
  • @Code-Apprentice: thank you for the comment, I have updated the code block
  • What are the values of client.abilities and abiaitiesDisplay?
  • @ksenia You're welcome! Ah, I misunderstood your question. I have updated the answer.
  • @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.
  • @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?
  • @ksenia client.abilities is a reference to the old array. Write this.client.abilities to get the new one instead.
  • @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.
  • Can you elaborate on your answer?