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

user_18107260 0
Viewed 2628

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]})
}
reactjs
5 Answers

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")} />
        </>
    )
}
user_125414130 
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);

user_82085470

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>
        );
      }
    }
user_144764160

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);
}
user_67741620

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>

user_9741860
Related