Changing useState() content by loops in react

I have declared a state in react like this:

const [properties,setProperties]=useState<any[]>([]);

and it receives arrays of objects. I can access the arrays attributes of the state in this way:

properties.forEach((element:any) => {
      console.log(element.propertyId)
    });

and it displays the values.

The problem is that I can not change the values by using "setProperties" through loops:

for(var i=0;i<properties.length;i++)
   {
     setProperties[i]({...properties,propertyId:"newValue"})
   }

I appreciate your helps

There are a couple ways you can do this, all of which involve calling setState only once with the new state array. Also note how we use .map(...) to create a copy of the old array. This is very important to signal to react that the state changed.

1. Create a copy of your state and use that to call setState only once.

   const newState = properties.map((element) => ({ ...element, propertyId: "newValue" }));
   setProperties(newState);

2. Use the callback style to set the properties:

   setProperties((oldProperties) => {
       return oldProperties.map((element) => ({ ...element, propertyId: "newValue" }));
   });