CODEWITHSUNDEEP
javascriptreactjs
Jeff Goes
Jeff Goes

Reputation: 555

how to create state properties from an array in React?

I am trying to setState of a component from an array of values.

I have these values on filtersSelected array-> 

["name", "date", "state"]

I want to set these values to my state like this

myState = {
...etc,
name: null,
date: null,
state: null
}

I tried using 

this.setState(previousState => ({
  ...previousState,
  ...filtersSelected: null
}))

apparently it doesn't work.Can anyone help me?

Upvotes: 0

Views: 82

Answers (4)

Liam
Liam

Reputation: 6743

Everyone has his own way, here are some ways I like

  let data = ["name", "date", "state"];
  Object.values(data).map(i => this.setState({ [i]: null }))

But I don't like to iterate setState for each element 

  let data = Object.assign({}, ...["name", "date", "state"].map((prop) => ({[prop]: null})))
  this.setState(data)

Or you can do like so

this.setState(["name", "date", "state"].reduce( ( accumulator, currentValue ) => ({...accumulator,[ currentValue ]: null}), {} ));

Upvotes: 0

Kushtrim
Kushtrim

Reputation: 1949

Convert your array to object first then use a loop to assign values to your newly created object.

let filteredSelected = ["name", "date", "state"];
let obj;

for(let i of filteredSelected){
    obj[i] = null;
}

this.setState(previousState => ({
  ...previousState,
  obj
}))

Upvotes: 0

Richard Roncancio
Richard Roncancio

Reputation: 61

In order to spread the array into an object you first need to convert the array into an object and then you can spread the object keys into the state:

this.setState((prevState) => ({
    ...prevState,
    ...filtersSelected.reduce(function(acc, item) {
        return Object.assign(acc, {[item]: null})
    }, {});
}))

Upvotes: 2

atengel
atengel

Reputation: 119

There are a couple things to note here. First of all, when you call setState, you do not need to provide all of the previous state. setState "merges" the specific state properties that you pass into the already existing state.

It also might be helpful to make your filters selected array an object, as you are trying to use the spread , but is by no means necessary. If you want to keep the array, you can use the code below.

let filtersSelected = ["name", "date", "state"];
this.setState({name: filtersSelected[0], date: filtersSelected[1], state: filtersSelected[2]});

Or, if you make filtersSelected into an object (which I highly recommend), you can do: 

let filtersSelected = {name: "name", date: "date", state: "state"};
this.setState(filtersSelected);

Upvotes: 0

Related Questions