how do I add an item on array of Objects on setState in React?

react update state array of objects
react update object in array
react setstate array
react hooks update array of objects
react setstate nested array
react map array of objects
react setstate array not working
react, ( usestate array)

I am creating arrays of objects and storing it on variables like this:

const nameOption = nameOptions(listHotels);
const estadoOption = stateOptions(listHotels);
const cityOption = cityOptions(listHotels);

my state is currently like this:

selectFilter: [
      { id: 1, type: 'Name'},
      { id: 1, type: 'Estado'},
      { id: 1, type: 'Cidade'},
    ],

I want to add these variables in a property called "options", like so:

selectFilter: [
          { id: 1, type: 'Name', options: nameOption},
          { id: 1, type: 'Estado', options: estadoOption},
          { id: 1, type: 'Cidade', options: cityOption},
        ],

how do I do it using the immutable react way?

First store the values to be inserted into a plain object, where the properties match the type values of selectFilter :

const options = {
    Name: nameOptions(listHotels),
    Estado: stateOptions(listHotels),
    Cidade: cityOptions(listHotels)
}

Then merge that with selectFilter into the extended version of it:

this.setState(prevState => ({
    selectFilter: prevState.selectFilter.map(filter => 
        ({...filter, options: options[filter.type]})
    )
}));

NB: there is probably a more efficient way to build the options object, since you seem to iterate listHotels for each property. This could probably be done in one sweep using reduce. But without details about what these functions (nameOptions, stateOptions, ...) do there is not much I can offer for that. Look into calling listHotels.reduce.

how do I add an item on array of Objects on setState in React , First store the values to be inserted into a plain object, where the properties match the type values of selectFilter : const options = { Name:  How to push to an array in React state Myfirst idea to add an item to a React state was using.push(), a typical JavaScript method to append to the end of an array. The.push()method is defined on

You can use Object.assign() to duplicate your state into an new object. This object is now mutable. Once done modifying it, you then replace your entire state with the new version. Here is an example of how that could be done.

  handleChange= () => {
    let mutableState = Object.assign({}, this.state);
    mutableState.thingToChange = foo;
    this.setState(mutableState);
  };

How to Add to an Array in React State using Hooks, When React state is an array, it is not obvious how to add items to the array Use useState([]) Hook to set state to [] and get state setter function  While the array from the previous state is spread into a new array, so the previous arrays doesn't get mutated, the new item is added at the end of the array. Now, you can add the item at the start of the array by using const list = [state.value, state.list]; instead. React State: Update item in array

this.setState(({selectFilter}) => (
    [
         {...selectFilter[0], options: nameOptions},
         {...selectFilter[1], options: estadoOptions},
         {...selectFilter[2], options: cityOptions},
    ]
);

Using the Spread syntax in React Js to set state array of object, In React , we all use setState to update the state . i was having some issue about updating the state of a array of Object to an empty state array. In React , we all use setState to update the state . i was having some issue about updating the state of a array of Object to an empty state array. But there was i little bit of problem in that . i…

How to add a new item to a list in React, We then call setState() passing this new object and add the new grocery of updating the current state object we set groceries to a new array. Hi, I got stuck in my react application. I tried to make a simple react app contains two nested list. 1) A user can create several lists. (This data will be stored in an array) 2) A user can create some items in each lists. (The array of data will be stored in object) I could pass data to array but I cannot pass the array of data to objects.

React/ReactJS: Update an Array State, setState({ checks: ['A','B'] });. Of course we can go about this way (assign the array state to some temporary variable, add the new element to it and  Adding Array of Objects. Now you may need to store the id of the <input/> element too along with its value on every check. You can bundle them together as an object literal { id: 'apple', value: 'Apple' } and add it to the array state, straight-forward.

How To Delete An Item From An Array In React – Vegibit, In this react tutorial we'll review a few things and then look at how to delete an item from an array. The number of items in the array determines how many item components are displayed on the page. We want to be First off, let's add that button in the markup. Then we have to call the setState() function to update the state. setObjectByPath(fieldPath, value) {this.setState({todoList: R.set(R.lensPath(fieldPath), value, this.state.todoList)})} In this way, no matter how complicated the object is, you can easily set a value to a property, even it’s nested in objects or arrays. (Using lensPath here so that you can set something like todoList.someObject.someNestedField.

Comments
  • You have to create a new array and replace the old one
  • You should really put an explanation here.