If you have an array of objects, and you want to update few properties of one of the objects inside the array. Then you could do something like this.

const index = state.findIndex(x => x.name === field);
if(index > -1) {
  const newState = [...state];
  newState[index] = { 
    ...newState[index],
    isValid: isValid,
    content: content,
    isUnchanged: false
  }
  setRequiredFields(newState);
}

• Find the index of the object that you want to update.
• Add properties inside that object.
• Update the react state.

The main reason I can see for this is to create a shallow copy of the object, so that if you perform any operations on the copy, it won't mutate the original. This would be especially useful in a functional programming paradigm where you don't want to mutate any shared objects/maintain a shared state.

However, as I mentioned, this only creates a shallow copy (as opposed to a deep copy), so that if any of the properties of the object are themselves mutable (such as an array property), then those properties would still be able to be mutated.

Edit: From the question in the comments, and building off of what @AdiH mentioned in their answer, it doesn't seem to make any sense to update post.title before creating the shallow copy as this would mutate the original object. It's possible that the author intended for this change to be reflected in both the original and the copy, but for any further changes to be reflected only in the copy

const x = { a: 'b', c: 'd', d: [] };

const copy = { ...x };
copy.a = 'c';
console.log(x); // unchanged

const same = x;
same.a = 'c';
console.log(x); // changed

copy.d.push('e');
console.log(x); // x.d has been changed

If you are using class components, use setState to update the state. In this case events is a field of the state. So you can spread rest of the state instead of state.events.

  addNewEvent(){
    setState({...this.state, events: [newEvent, ...this.state.events]})
  }

You can use a mix of .map and the ... spread operator

You can set the value after you've created your new array

let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}];

let array2 = array.map(a => {return {...a}})

array2.find(a => a.id == 2).name = "Not Two";

console.log(array);
console.log(array2);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Or you can do it in the .map

let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}];

let array2 = array.map(a => {
  var returnValue = {...a};

  if (a.id == 2) {
    returnValue.name = "Not Two";
  }

  return returnValue
})


console.log(array);
console.log(array2);

.as-console-wrapper { max-height: 100% !important; top: 0; }

To make case 2 work, you need to make a variable out of the prevState first. Then you can push to it and return that new variable.

const case2 = () => {
   const newItem = {id:3,text:'Learn .Net'};
   
   setTodos((prevState) => {
   const newState = [...prevState]
    newState.push(newItem);
    return newState;
   });
  
  }  

For case 3, you made a little mistake by making result an object instead of an array. Change the {} to [] and it should work fine, like this.

const case3 = () => {
   const newItem = {id:3,text:'Learn C#'};
   
   setTodos((prevState) => {
    let result = [...prevState, newItem ] ;
    return result;
   });
  
  }

state is an object so updating it the way you are at the moment won't work.

You can simply update only the property you need as:

this.setState({
  metawords: evt.target.value,
})

Since you've mentioned spread operator, you can also (but not always necessary) update your state as:

this.setState({
  ...this.state,
  metawords: evt.target.value,
})

or

this.setState(prevState => ({
  ...prevState,
  metawords: evt.target.value,
}))

Should you need more info about it, I recommend you to have a look at ReactJS documentation.

Many ways to do it, really. Here's one:

this.setState(prevState => (
  {appointmentsData: {...prevState.appointmentsData}, newAppt}
));

Though your approach should work too, if you just add the appointmentsData: first. Like so:

this.setState({appointmentsData: {...this.state.appointmentsData, ...newAppt}});

This will spread all the previous values into a new object, plus the one you want to add.

I personally always use the functional way of setting the state when the new one depends on a previous state value, but your way is fine here too.

Array.find will return the first value matched in the array. Here the array consist of objects and the value returned will be the reference to the object.

const foundTask = this.state.items.find(task => task.id === id);

Here foundTask will have reference to the same object contained in the state.items. So when you modify foundTask you're modifying the same object as in state.items.

For example,

If this.state.items is [{ id: 1 }] and if you do

const foundTask = this.state.items.find(obj => obj.id === 1);
foundTask.id = 2;
console.log(this.state.items); // [{ id:2 }]

In the code,

this.setState({
  items: [
    ...this.state.items,
    ...foundTask
  ]
});

This will update the state with updated completed value for the task. ...foundTask will give you an error in the console since foundTask will be an object and you're spreading it in an array.

Here not having ...foundTask will produce same result. Perhaps not with an error.