React State update a nested array with objects based on the id when iterated

Question

I have an react state with objects/array that is filled, but also then later I want to edit text inputs and edit the related fields on object also, i found no solutions until now.

So this is my state for example:

const [data, setData] = useState({
    working_hours: [
      {
        id: 1,
        description: 'Random Text',
        price: 100,

      },
      {
        id: 2,
        description: 'Text Random',
        price: 100,
      },
    ]
  });

Here is my Jsx:

{data.working_hours.map(item => 
<>
  <input type={text} value={item.description}
   onChange={(e) => handleChange(e)} />

  <input type={text} value={item.price}
   onChange={(e) => handleChange(e)} />
</>
)}

Here is what I tried:

function handleChange(e){
 const value = e.target.value;
 setData({...data, [...data.working_hours, e.target.value]})
}

Does this answer your question? How to update nested state properties in React — yuriy636
– yuriy636, Commented Feb 6, 2022 at 9:08
No that much, this is based on component. I'm looking for function based anwsers. Beside that, this question has a different logic, on updating based on current id that is in the map function. — modih65067
– modih65067, Commented Feb 6, 2022 at 9:09

Sagar Darekar · Accepted Answer · 2022-02-06 09:41:16Z

6

You need to pass additional parameters to your handleChange as item ID which you want to update and property name because without these you will not be able to identify which property to update dynamically. This way you can use the same handleChange for multiple inputs.
See below code -

function handleChange(e, itemId, property) {
    const value = e.target.value;
    //copying data to temp variable so that we do not directly mutate original state
    const tempWorkingHours = [...data.working_hours];
    //findIndex to find location of item we need to update
    let index = tempWorkingHours.findIndex(item => item.id == itemId);
    // -1 check to see if we found that object in working hours
    if(index != -1){
       tempWorkingHours[index] = {
         ...tempWorkingHours[index], //keeping existing values in object
         [property]: value  //here property can be "price" or "description"
       }
    }
    
    setData({ ...data, working_hours: tempWorkingHours })
}

{
    data.working_hours.map(item =>
        <>
            <input type={text} value={item.description}
                onChange={(e) => handleChange(e, item.id, "description")} />

            <input type={text} value={item.price}
                onChange={(e) => handleChange(e, item.id, "price")} />
        </>
    )
}

edited Feb 6, 2022 at 9:41

answered Feb 6, 2022 at 9:30

Sagar Darekar

1,01611 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jsN00b Over a year ago

Do you think we can avoid tempWorkingHours by doing something like so:

setData(prevData => ({...prevData, working_hours: prevData.working_hours.map(itm => itm.id === itemId ? {...itm, [property]: e.target.value} : itm)});

modih65067 Over a year ago

This worked, but I wonder for example if we want to make it more dinamic, and based on the parameter we pass on the function on onChange control which object, for example if we have another object named not_working_hours beside the one working_hours, so what I mean is that to be bale to control and the object where you are putting data, I hope you got me.

modih65067 Over a year ago

@jsN00b and what do you think about my comment, can we then do that?

jsN00b Over a year ago

@modih65067 - Sure, you may make it dynamic to update working_hours or not_working_hours or another prop of data. Need to pass it as a parameter to handleChange and update it appropriately within the method.

modih65067 Over a year ago

sure let's see, I hope @sagardarekar a edit

|

René Link · Accepted Answer · 2022-02-07 06:35:32Z

When you want to update the state of objects in the nested array, you must identify these objects and the property you want to update. Thus your handler should look like this.

function handleChange(index, property, value){
   // ...
}

The setData function will only trigger a rerender if you pass it a new object. Thus you should create a copy.

function handleChange(index, property, value) {
  const new_working_hours = [...data.working_hours]; // copy the array
  const new_working_hour = { ...data.working_hours[index] }; // copy the array item to change

  new_working_hour[property] = value; // set the new value
  new_working_hours[index] = new_working_hour; // assign the new item to the copied array

  setData({ working_hours: new_working_hours }); // return a new data object
}

Here is a working example. Click Run code snippet below.

const { useState } = React;

const App = () => {
  const [data, setData] = useState(initialState);

  function handleChange(index, property, value) {
    const new_working_hours = [...data.working_hours]; // copy the array
    const new_working_hour = { ...data.working_hours[index] }; // copy the array item to change

    new_working_hour[property] = value; // set the new value
    new_working_hours[index] = new_working_hour; // assign the new item to the copied array

    setData({ working_hours: new_working_hours }); // return a new data object
  }

  return data.working_hours.map((item, index) => (
    <div>
      <input
        type="text"
        value={item.description}
        onChange={(e) => handleChange(index, "description", e.target.value)}
      />

      <input
        type="text"
        value={item.price}
        onChange={(e) => handleChange(index, "price", e.target.value)}
      />
    </div>
  ));
};


const initialState = {
  working_hours: [
    {
      id: 1,
      description: "Random Text",
      price: 100
    },
    {
      id: 2,
      description: "Text Random",
      price: 100
    }
  ]
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Meddah Abdallah · Accepted Answer · 2022-02-06 09:27:23Z

1

function handleChange(e){
 const value = e.target.value;
 const newData = {
   ...data,
   working_hours: [
     ...(data?.working_hours ? data.working_hours : {}),
     value
   ]
 };
 setData(newData);
}

Here is a simulation

let data = {
 working_hours: [
  {
    id: 1,
    field: "test",
  }
 ],
};

function handleChange(e){
 const value = e.target.value;
 const newData = {
   ...data,
   working_hours: [
     ...(data?.working_hours ? data.working_hours : {}),
     value
   ]
 };
 console.log('newData', newData);
}

const event = {
 target: {
  value: { id: 2, field: "test2" },
 }
};

handleChange(event);

edited Feb 6, 2022 at 9:27

answered Feb 6, 2022 at 9:18

Meddah Abdallah

7061 gold badge7 silver badges28 bronze badges

9 Comments

modih65067 Over a year ago

this doesn't wokrk, also I don't see how you are inserting the new value?

Meddah Abdallah Over a year ago

in the newData object, I put back data, like this: ...data, then I overrided working_hours, by putting [...data.working_hours, value] and here is where I set value

modih65067 Over a year ago

Thank you, but this didn't work.

Meddah Abdallah Over a year ago

Can you explain what didnt work ? what did you get, and what were you expecting to get ?

modih65067 Over a year ago

The thing is how we know which input to update, because for example there can be 4-5 items in the list that has same property, we need to do that based on the id.

|

LironShirazi · Accepted Answer · 2022-02-06 09:44:07Z

1

The problem is that you are missing the part of indicating which object to update, you can do so by passing the index of the array or by the id that the object has. for example:

function handleChange(e){
 const value = e.target.value;
 const tempWorkingHours = data.working_hours.map((item) => { 
    if (item.id === value.id) {
      return {
         ...item,
          price: value
      } 
   }
   return item;
}
 setData({...data, working_hours: tempWorkingHours })
}

in that way, you are using a map to loop over the array and find the item you want to change(but by the temp variable that holds a copy of the data to avoid mutating the state). You can also pass the index to the handle change function:

{data.working_hours.map((item, index) => 
<>
  <input type={text} value={item.description}
   onChange={(e) => handleChange(e)} />

  <input type={text} value={item.price}
   onChange={(e,index) => handleChange(e, index)} />
</>
)}

And then in the handleChange use the index to access the relevant index to change the array. let me know if you want me to explain more with modification of your code, but I think the way I explain above with the id solution is nice.

Edit- the index version :

     function handleChange(e, index) {  
      const value = e.target.value; 
      const tempWorkingHours = [...data.working_hours];  
      tempWorkingHours[index].price = value;  
      setData({...data, working_hours: tempWorkingHours});
}

Fixed the first example, the return moved outside the if statement in case it's not the relevant id we want to modify.

Read more about forms from react's official docs: https://reactjs.org/docs/forms.html It doesn't matter if you are using function components to get the point, its the same. Only the way You are updating the state is with useState.

  class Reservation extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isGoing: true,
          numberOfGuests: 2
        };
    
        this.handleInputChange = this.handleInputChange.bind(this);
      }
    
      handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
    
        this.setState({
          [name]: value
        });
      }
    
      render() {
        return (
          <form>
            <label>
              Is going:
              <input
                name="isGoing"
                type="checkbox"
                checked={this.state.isGoing}
                onChange={this.handleInputChange} />
            </label>
            <br />
            <label>
              Number of guests:
              <input
                name="numberOfGuests"
                type="number"
                value={this.state.numberOfGuests}
                onChange={this.handleInputChange} />
            </label>
          </form>
        );
      }
    }

edited Feb 6, 2022 at 9:44

answered Feb 6, 2022 at 9:20

LironShirazi

4412 silver badges8 bronze badges

10 Comments

modih65067 Over a year ago

I tried to copy/paste this and something is missing in the syntax.

modih65067 Over a year ago

Can you update the index to the handleChange too?

modih65067 Over a year ago

You have two returns inside the if, can you check it?

LironShirazi Over a year ago

function handleChange(e, index){  const value = e.target.value;  const tempWorkingHours = [...data.working_hours];  tempWorkingHours[index].price = value;  setData({...data, working_hours: tempWorkingHours }); }

modih65067 Over a year ago

Thank you, Liron, you did also contributed to much, and others, now its fixed.

|

A.R.SEIF · Accepted Answer · 2022-02-07 04:29:38Z

1

change elements

{data.working_hours.map(item => 
<>
  <input name='description' type={text} value={item.description}
   onChange={(e) => handleChange(e,item.id)} />

  <input name='price' type={text} value={item.price}
   onChange={(e) => handleChange(e,item.id)} />
</>
)}

change handleChange


function handleChange(e,id){
 const value = e.target.value;
 const name= e.target.name;
 var dataitemIndex = data.working_hours.findIndex(x=>x.id == id);
data.working_hours[dataitemIndex] = {...data.working_hours[dataitemIndex],[event.target.name]: event.target.value};
 setData(data);
}

edited Feb 7, 2022 at 4:29

answered Feb 6, 2022 at 9:47

A.R.SEIF

8731 gold badge8 silver badges28 bronze badges

1 Comment

Sagar Darekar Over a year ago

[event.target.name] for this to work you need to assign name property to your input elements.

Collectives™ on Stack Overflow

React State update a nested array with objects based on the id when iterated

5 Answers 5

6 Comments

Comments

9 Comments

10 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

9 Comments

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related