functional way of updating a complex JSON object with setState in React

Question

I have This structure data That I received in JSON: (I'm can't modify it for it's not me that works on the API) and I have to update the JSON file with the modification made by the user.

{
    "id": 1269,
    "name": "Fet",
    "firstname": "Boba",
    "contacts": [
        {
            "id": 2,
            "name": "Ema Tal",
        }
    ]
}

I get the JSON and put it in a localStorage, then I update the localStorage et return te JSON to the api for UPDATE.

const [user, setUser] = useState();

const handleChange = (e) => {
        setUser(prev => ({
          ...prev, contacts: [
            { ...prev, name: e.target.value }
          ]
        }))
}

I can't seem to figure out the way it output it in the same order and only replacing data without adding a new contact on each typo.

the problem I have is that every time I update the file, it replace the NAME that is not in Contacts or it create new contacts in contatcs

example of replace the name NOT in contacts

  {
    "id": 1269,
    "name": "Ema tal", <-- same not good
    "firstname": "Boba",
    "contacts": [
        {
            "id": 2,
            "name": "Ema Tal", <-- same not good
        }
    ]
}

and an example of what I meen by creating new contacts in contacts (that is not good either)

{
    "id": 1269,
    "name": "Fet",
    "firstname": "Boba",
    "contacts": [
        {
            "id": 2,
            "name": "Ema Tal",
        },
         "contacts": [
         {
            "id": 2,
            "name": "Ema Tal 2",
          }
    ]
    ]
}

I need the data to update exacly like this (the same way it come in.)

{
    "id": 1269,
    "name": "Fet",
    "firstname": "Boba",
    "contacts": [
        {
            "id": 2,
            "name": "Ema Tal updated",
        }
    ]
}

`contacts` is an array, so you'll need to access the relevant index to update. Also there is no JSON here, just a javascript object. see: [How to update state with usestate in an array of objects?](https://stackoverflow.com/questions/62918710/how-to-update-state-with-usestate-in-an-array-of-objects) — pilchard, Dec 21 '22 at 12:54
Do you have an example that would work, I just can seem to make it work. — Francis, Dec 21 '22 at 20:27
It is unclear what you are trying to update, and what is 'nom'? Are you trying to add a new contact to the list? Post a little more code for more context — pilchard, Dec 21 '22 at 21:38
@pilchard I have added some code and more explanations and nom, was I bad typo, fixed it (name). thanks for the help — Francis, Dec 22 '22 at 12:50
its super hard to see what it is you are trying to do, but if you are only modifling the contacts, I think you want to use assign something like setState(Object.assign({}, state, {contacts: [] })) — terpinmd, Dec 22 '22 at 12:58

score 0 · Accepted Answer · edited Dec 24 '22 at 20:28

0

If this can help someone else, I found what works for me, and your input helps me find the solution.

Since I have an object that contains an array of other objects I needed a map in there like this.

newValues = user['contacts'].map(section => {
    return ({ ...section, ['name']: e.target.value })
})

setUser(prev => ({
    ...prev, contacts:
        newValues
}));

edited Dec 24 '22 at 20:28

fatihyildizhan

8,614
7
64
88

answered Dec 22 '22 at 15:15

Francis

21
5

score 0 · Answer 2 · answered Dec 24 '22 at 20:39

In the contacts part of the new object, you need to spread only the original contacts part and not the whole prev state.

const handleChange = (e) => {
  setUser(prev => ({
    ...prev,
    contacts: [{
      ...prev.contacts, // you need the .contacts here
      name: e.target.value
    }]
  }))
}

functional way of updating a complex JSON object with setState in React

2 Answers2