Update one of the objects in array, in an immutable way

Question

In React's this.state I have a property called formErrors containing the following dynamic array of objects.

[   {fieldName: 'title', valid: false},    {fieldName: 'description', valid: true},   {fieldName: 'cityId', valid: false},   {fieldName: 'hostDescription', valid: false}, ] 

Let's say I would need to update state's object having the fieldName cityId to the valid value of true.

What's the easiest or most common way to solve this?

I'm OK to use any of the libraries immutability-helper, immutable-js etc or ES6. I've tried and googled this for over 4 hours, and still cannot wrap my head around it. Would be extremely grateful for some help.

Answer 1

You can use map to iterate the data and check for the fieldName, if fieldName is cityId then you need to change the value and return a new object otherwise just return the same object.

Write it like this:

var data = [     {fieldName: 'title', valid: false},      {fieldName: 'description', valid: true},     {fieldName: 'cityId', valid: false},     {fieldName: 'hostDescription', valid: false}, ]  var newData = data.map(el => {                   if(el.fieldName == 'cityId')                      return Object.assign({}, el, {valid:true})                   return el               });  this.setState({ data: newData });  

Answer 2

Here is a sample example - ES6

The left is the code, and the right is the output

Here is the code below

const data = [     { fieldName: 'title', valid: false },      { fieldName: 'description', valid: true },     { fieldName: 'cityId', valid: false }, // old data     { fieldName: 'hostDescription', valid: false }, ]  const newData = data.map(obj => {   if(obj.fieldName === 'cityId') // check if fieldName equals to cityId      return {        ...obj,        valid: true,        description: 'You can also add more values here' // Example of data extra fields      }   return obj });  const result = { data: newData };   console.log(result);  this.setState({ data: newData }); 

Hope this helps, Happy Coding!