Update values inside array of objects using Hooks

Question

I am trying to add meeting events using Google Calendar API. In that I want to update my email in below ela object using hooks I mean to say that I want to update my email [email protected] 'attendees': [ {'email': '[email protected]'},] every time I take input using given form.

    function App() {
      var ela={
        'attendees': [ 
          {'email': '[email protected]'},
          {'email': '[email protected]'}
        ]
      }
      const [formDB,setFormDB]=useState(ela);
         
      const handleClick = (e) => {
        e.preventDefault();
        gapi.load('client:auth2', () => {
          console.log('loaded client')
    
          gapi.client.load('calendar', 'v3', () => console.log('bam!'))
    
          gapi.auth2.getAuthInstance().signIn()
          .then(() => {
            
           // var event=formDB;
            console.log(formDB);
            var request = gapi.client.calendar.events.insert({
              'calendarId': 'primary',
              'resource': formDB,
            })
    
              request.execute(formDB => {
              console.log(formDB)
              window.open(formDB.htmlLink)
            })}
    
    
      return (
        <div className="App">
         // I need to fix this onChange eventin following input. Everytime I am trying to change using below logic it's saying 
         <input
            type="email"
            name="formDB.attendees[0].email"
            value={formDB.attendees[0].email}
            onChange={e=>setFormDB({ ...formDB.attendees[0], email: e.target.value})}  **fix this**
          />
         <input type="submit" name="Confirm" />
        </form>
         </div>
      );
    }

You initialize your state with an object that has an array 'attendees'. But your onChange overwrites it with you first attendee entry. after that there is no array and all indexer accesses will fail — Martin
– Martin, Commented Feb 17, 2021 at 10:01

Drew Reese · Accepted Answer · 2021-02-17 10:02:35Z

1

Issue - State Shape Mutation

setFormDB({ ...formDB.attendees[0], email: e.target.value})

You are mutating the state shape from

{ attendees: [] }

to

{ email: string }

There is no longer a formDB.attendees array, so attempting to access formDB.attendees[0] throws an error since formDB.attendees is undefined.

Solution - Maintain the State Invariant

It seems you are attempting to update the first email in the array. When updating values in arrays in react state you need to shallow copy the entire array, and then update the index/element. In fact, when updating any nested state you need to shallow copy any nested objects your are updating.

<input
  type="email"
  name="formDB.attendees[0].email"
  value={formDB.attendees[0].email}
  onChange={e => setFormDB({
    ...formDB,
    attendees: formDB.attendees.map((el, i) => i === 0 ? { email: e.target.value } : el)
  })}
/>

Alternatively since you are always updating the first email you can create a new array, replacing the first element and slice in the rest of attendees array.

<input
  type="email"
  name="formDB.attendees[0].email"
  value={formDB.attendees[0].email}
  onChange={e => setFormDB({
    ...formDB,
    attendees: [{ email: e.target.value }, ...formDB.attendees.slice(1)],
  })}
/>

answered Feb 17, 2021 at 10:02

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

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

1 Comment

Mohammad Zuha Khalid Over a year ago

Thanks for you quick response. Yeah there I was missing.

Collectives™ on Stack Overflow

Update values inside array of objects using Hooks

1 Answer 1

Issue - State Shape Mutation

Solution - Maintain the State Invariant

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue - State Shape Mutation

Solution - Maintain the State Invariant

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related