How do I update 2 objects with React Hook useState

Question

My first Object

 const [message, setMessage] = useState({ 
      Features: {Active:false},
      General: {FileTimeout:0,ZipDepth:0}
  });

How do I update this object?

 const handleInput=e=>{
    const name=e.currentTarget.name;
    const value=e.currentTarget.value;

    var temp = {...message}


    if(name == 'active'){
     if(value==='on'){
      temp.Features.Active=true;
     }
     else{}
    } 
    else if(name == 'timeout'){
       temp.General.ZipDepth= 5;
    } 
    else if(name == 'zipdepth'){
     temp.General.FileTimeout= 7;
    }
  }

  New Values= { Features :{Active:true}, General: {FileTimeout:7,ZipDepth:5}});

How can I update the values like this? If there is a library or something for this, I can also use it.

Is there an issue with the current code? I.E. is it not working? Are you just asking if there's a better way to update the nested state properties? — Drew Reese
– Drew Reese, Commented Aug 12, 2021 at 6:22
I'm asking how do I update the nested object? not updating like this — Mehmet Ceylan
– Mehmet Ceylan, Commented Aug 12, 2021 at 6:24
I don't understand why you are asking how to update the nested properties when you provide us a code snippet updating the nested properties. That's why I asked if there was an issue. — Drew Reese
– Drew Reese, Commented Aug 12, 2021 at 6:25

Drew Reese · Accepted Answer · 2021-08-12 06:41:46Z

You are mutating your state object. Even though you create a copy temp of the message state, you are mutating the nested properties. You necessarily need to also shallow copy all nested state you are updating.

I would suggest using a functional state update to access the previous messagestate, and use aswitchstatement to cover the different cases on thename` value, returning the next state value for each one. Notice that each level of nested state is shallow copied before it's updated.

const [message, setMessage] = useState({ 
  Features: { Active: false },
  General: { FileTimeout: 0, ZipDepth: 0 }
});

const handleInput=e=>{
  const { name, value } = e.currentTarget;

  setMessage(message => {
    switch(name) {
      case 'active':
        if (value === 'on') {
          return {
            ...message, // shallow copy of state
            Features: {
              ...message.Features, // shallow copy nested state
              Active: true,
            },
          };
        } else {
          // ? return some new state
        }

      case 'timeout':
        return {
          ...message, // shallow copy of state
          General: {
            ...message.General, // shallow copy nested state
            ZipDepth: 5,
          },
        };

      case 'zipdepth':
        return {
          ...message, // shallow copy of state
          General: {
            ...message.General, // shallow copy nested state
            FileTimeout: 7,
          },
        };

      default:
        return message; // no update, return current state
    };
  });
}

Ferin Patel · Accepted Answer · 2021-08-12 06:28:53Z

1

const [message, setMessage] = useState({ 
      Features: {Active:false},
      General: {FileTimeout:0,ZipDepth:0}
  });

const handleInput=e=>{
    const name=e.currentTarget.name;
    const value=e.currentTarget.value;

    var temp = {...message}


    if(name == 'active'){
     if(value==='on'){
      temp.Features.Active=true;
     }
     else{}
    } 
    else if(name == 'timeout'){
       temp.General.ZipDepth= 5;
    } 
    else if(name == 'zipdepth'){
     temp.General.FileTimeout= 7;
    }

    setMessage({...temp})  // You need to call setMessage function in order to update the state.
  }

answered Aug 12, 2021 at 6:28

Ferin Patel

4,0193 gold badges19 silver badges50 bronze badges

1 Comment

Drew Reese Over a year ago

This solution mutates the state object, i.e. temp.Features.Active=true; is a state mutation.

Collectives™ on Stack Overflow

How do I update 2 objects with React Hook useState

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related