Updating state Array of objects in React js

Question

Hello Everyone i'm stuck on this issue i want too update state my data is in this form, when i update the state it removes everything from the state i dont know how can i achieve this please help Sample code

   appoinments:[ {
      date: "2021-06-04",

      id: 12,
      app_type: 2,
      section: 4,

      title: "PZR 60",
      patient: "Gerber, Susanna",
      pat_nr: 27,
      behandler: "Greifenberg, Wolfgang",
      zimmer: "Prophylaxe",
      kategorie: "Bestell-Patient",

      von_min: 720,
      bis_min: 780,

      color: "#FFF2CC",
      border_color: "#006666",
      badge_color: "hsl(200, 50%, var(--hsL45))",
      vorbereitung: 0,
      nachbereitung: 0,
    },
    {
      date: "2021-06-05",

      id: 13,
      app_type: 2,
      section: 4,

      title: "PZR 60",
      patient: "Gerber, Susanna",
      pat_nr: 27,
      behandler: "Greifenberg, Wolfgang",
      zimmer: "Prophylaxe",
      kategorie: "Bestell-Patient",

      von_min: 720,
      bis_min: 780,

      color: "#FFF2CC",
      border_color: "#006666",
      badge_color: "hsl(200, 50%, var(--hsL45))",
      vorbereitung: 0,
      nachbereitung: 0,
    },
  ],`

i want to update only

  section: 3,
        von_min :  433,
        bis_min : 234,
        date : new date()

I'm using the following approch to update but didn't succeed please help

  this.setState(prevState => ({
      calendar: {                   // object that we want to update
      ...prevState.calendar, 
      appointments:{
        section: params.section,
        von_min :  params.newFrom,
        bis_min : item.von_min + length,
        date : date_string
      },   // keep all other key-value pairs
        // update the value of specific key
      }
    }))

As a side, if you are able to on your project, i'd suggest having a look at Immer, its very useful for handling deep / large objects - immerjs.github.io/immer — andy mccullough
– andy mccullough, Commented Aug 6, 2021 at 12:13

Anton Bahurinsky · Accepted Answer · 2021-08-06 12:01:20Z

1

Try this (didn't test the code, just showing the concept):

this.setState(prevState => ({
  calendar: {
    ...prevState.calendar, 
    appointments: prevState.calendar.appointments.map(x => ({
      ...x,
      section: params.section,
      von_min:  params.newFrom,
      bis_min: item.von_min + length,
      date: date_string
    })),
  },
}));

answered Aug 6, 2021 at 12:01

Anton Bahurinsky

4563 silver badges7 bronze badges

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

1 Comment

afnan Over a year ago

Hi thanks it works but only problem is it's update each object i want to update only one at a time :) . how can i achieve that i've index number in state so how can i update only one object on the basis of index

Nikita Mazur · Accepted Answer · 2021-08-06 12:09:08Z

Ok, so your appointments is an array, when you do:

this.setState(prevState => ({
  calendar: {                   // object that we want to update
  ...prevState.calendar, 
  appointments:{
    section: params.section,
    von_min :  params.newFrom,
    bis_min : item.von_min + length,
    date : date_string
  },   // keep all other key-value pairs
    // update the value of specific key
  }
}))

You set the state of appointments to an object. You must set the state to a new array which contains the changed element, and the rest of the original data.

this.setState(prevState => ({
  calendar: {
    ...prevState.calendar, 
    appointments: prevState.calendar.appointments.map((item) => {
      if (item.section === 3) {
          return {
             ...item,
             von_min :  433,
             bis_min : 234,
             date : new date()
          }
      }
      return item
    }),
  },
}));

Collectives™ on Stack Overflow

Updating state Array of objects in React js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related