How to update object using index value in Reactjs?

Question

I am having a onChange function i was trying to update the array options by index wise and i had passed the index to the function.

Suppose if i am updating the options array index 0 value so only that value should be update rest should remain as it is.

Demo

Here is what i tried:

import React from "react";
import "./styles.css";

export default function App() {
  const x = {
    LEVEL: {
      Type: "LINEN",
      options: [
        {
          Order: 1,
          orderStatus: "INFO",
          orderValue: "5"
        },
        {
          Order: 2,
          orderStatus: "INPROGRESS",
          orderValue: "5"
        },
        {
          Order: 3,
          orderStatus: "ACTIVE",
          orderValue: "9"
        }
      ],
      details: "2020  N/w UA",
      OrderType: "Axes"
    },
    State: "Inprogress"
  };

  const [postdata, setPostData] = React.useState(x);

  const handleOptionInputChange = (event, idx) => {
    setPostData({
      ...postdata,
      LEVEL: {
        ...postdata.LEVEL.options,
        [event.target.name]: event.target.value
      }
    });
  };

  return (
    <div className="App">
      {postdata.LEVEL.options.map((item, idx) => {
        return (
          <input
            type="text"
            name="orderStatus"
            value={postdata.LEVEL.options[idx].orderStatus}
            onChange={e => handleOptionInputChange(e, idx)}
          />
        );
      })}
    </div>
  );
}

Suppose if i want to add the objects in another useState variable for all the updated options only, will this work?

const posting = {
        "optionUpdates": [],
    }

    const [sentdata , setSentData] = useState(posting);
    
    setSentData({
            ...sentdata,
            optionUpdates: [{
            ...sentdata.optionUpdates,
            displayOrder: event.target.value
        }]
    })

Guru Hadadi · Accepted Answer · 2020-06-23 13:38:23Z

1

Basically, you need to spread properly, use callback approach to set state etc.

Change your handler to like this.

Working demo

const handleOptionInputChange = (event, idx) => {
    const target = event.target; // with callback approach of state, you can't use event inside callback, so first extract the target from event.
    setPostData(prev => ({ // prev state
      ...prev, // spread prev state
      LEVEL: { //update Level object
        ...prev.LEVEL,
        options: prev.LEVEL.options.map((item, id) => { // you need to loop thru options and find the one which you need to update.
          if (id === idx) { 
            return { ...item, [target.name]: target.value }; //spread all values and update only orderStatus
          }
          return item;
        })
      }
    }));
  };

Edit Added some comments to code and providing some explanation.

You were spreading postdata.LEVEL.options for LEVEL which is incorrect. For nested object you need to spread each level.

edited Jun 23, 2020 at 13:38

answered Jun 23, 2020 at 13:23

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

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

5 Comments

Parth Tiwari Over a year ago

Thanks , Can you please bring some comment into it so that i can easily understand.

Parth Tiwari Over a year ago

Thanks you so much i just update a same change in question will that work? or any other solution for that

Guru Hadadi Over a year ago

yes, it should... see the working demo link (codesandbox)

Parth Tiwari Over a year ago

I am taking about the sentdata part which i just update inside of my question section

Guru Hadadi Over a year ago

i see - ok ... no ur setSentData won't work...some issues are there with it ... can you show the jsx code for that as well.... perhaps please post another question regarding setSentData ... this way your reputation increases(by asking good qns) and also other experts will help u quickly...

Julien Deniau · Accepted Answer · 2020-06-23 13:23:49Z

0

Apparently, your event.target.name is "orderStatus", so it will add an "orderStatus" key to your postData.

You might want to do something like this:

const handleOptionInputChange = (value, idx) => {
  setPostData(oldValue => {
    const options = oldValue.LEVEL.options;
    options[idx].orderStatus = value;

    return {
      ...oldValue,
      LEVEL: {
        ...oldValue.LEVEL,
        options
      }
    };
  });
};

return (
  <div className="App">
    {postdata.LEVEL.options.map((item, idx) => {
      return (
        <input
          type="text"
          name="orderStatus"
          value={postdata.LEVEL.options[idx].orderStatus}
          onChange={e => handleOptionInputChange(e.target.value, idx)}
        />
      );
    })}
  </div>
);

See this demo

edited Jun 23, 2020 at 13:23

answered Jun 23, 2020 at 13:10

Julien Deniau

5,0501 gold badge20 silver badges22 bronze badges

2 Comments

Parth Tiwari Over a year ago

No it does not work, if i dont pass event.target.name how will it identify the name and if i pass [idx]: event.target.value then i think it will update whole object not just orderStatus

Julien Deniau Over a year ago

I updated the code and added a working codesandbox link

Collectives™ on Stack Overflow

How to update object using index value in Reactjs?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related