Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React update state array of objects inside array of objects

I have a piece of state, invoices, that is an array of objects as such below:

 const [invoices, setInvoices] = useState([
  {
    id: 123,
    tag_number: "",
    item_amounts: [
      { item: "processing", amount: 159 },
      { item: "shipping", amount: 10 },
    ],
    complete: false,
    dropoff_id: "",
    customer_id: "",
    picked_up: false,
  },
  {
    id: 124,
    tag_number: "",
    item_amounts: [
      { item: "processing", amount: 169 },
      { item: "shipping", amount: 20 },
    ],
    complete: false,
    dropoff_id: "",
    customer_id: "",
    picked_up: false,
  }
]);

I have gathered so far that to update the value associated with a key inside one of the objects in invoices, I would need to do something like the following:

setInvoices(
  invoices.map((invoice) => {
    if (invoice.id === id) {
      return { ...invoice, complete: true };
    } else {
      return invoice;
    }
  })
);

What I’m struggling to figure out is how to update an array of objects inside one of the objects in invoices?

In particular, I’m trying to update the the processing object inside of item_amounts for an invoice of a particular id

Tags:

2

Answers


  1. 0

    I think, this code will update the processing object inside of item_amounts for an invoice of a particular id.

    Here is the code of setInvoice function:

    setInvoices(
  invoices.map((invoice) => {
    if (invoice.id === id) {
      return {
          ...invoice,
          item_amounts: invoice.item_amounts.map((item) =>
            item.item === "processing" ? { ...item, amount: newAmount } : item
          ),
        };
    } else {
      return invoice;
    }
  })
);

    Hope to be helpful for your understanding.

    Login or Signup to reply.
  2. 0

    If you want to update the amount value for the "processing" item inside the item_amounts array for a specific invoice ID, that means you want to update an array of objects inside one of the objects in invoices. If I’m correct, you need to perform a nested update.
    Try this:

     const updateInvoiceItemAmount = (id, newItemAmount) => {
  setInvoices((prevInvoices) => 
    prevInvoices.map((invoice) => {
      if (invoice.id === id) {
        return {
          ...invoice,
          item_amounts: invoice.item_amounts.map((itemAmount) => {
            if (itemAmount.item === "processing") {
              return { ...itemAmount, amount: newItemAmount };
            } else {
              return itemAmount;
            }
          }),
        };
      } else {
        return invoice;
      }
    })
  );
};

    updateInvoiceItemAmount takes an id and a new amount value (newItemAmount), uses setInvoices to update the state based on the previous state. The map function is used to iterate over each invoice in the invoices array, and for the invoice with the specified id, it updates the item_amounts array using another map function.

    This ensures that you only update the amount for the "processing" item within the specified invoice.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search