How to update new object into the existing object in ReactJS?-CodePudding

I have one object named waA which is required in final step. But in ReactJS the new object is not getting updated in the previous object using switch in a function.

The object code is given below:

waA = {
        jsonObject: {
            wAConfigur: {}
        }
    }
var updatewaA = waA.jsonObject.wAConfigur;

The button has onClick event and its function is:

function next(){
    switch(case){
        case 1:
            const bD = {
                    'name': 'john',
                    'title': 'Boy',
            }
            updatewaA.configureSet = bD;
        break;
        case 1:
            const cE = {
                    'age': 34,
            }
            updatewaA.newDate = bD;
        break;
        
    }
}

The final Object which is needed is:

{
    jsonObject: {
            wAConfigur: {
                configureSet: {
                    'name': 'john',
                    'title': 'Boy',
                },
                newDate: { 
                    'age': 34
                }
            }
        }
    }

But for some reason in ReactJS the object is not getting updated.

How can I be able to do it? Thank you.

CodePudding user response：

You need to store the object inside the react state to later make it update and render new state to the dom.

import {useState} from "react"

// new state waA and updater function setWaA
const [waA, setWaA] = useState({
  jsonObject: {
    wAConfigur: {},
  },
})

function next(number){
  switch(number){
      case number:
          const bD = {
                  'name': 'john',
                  'title': 'Boy',
          }
        
          // here we added configureSet
          setWaA(prevWaA => {
            ...prevWaA,
            jsonObject: {
              ...prevWaA.jsonObject,
              configureSet = bD
            }
          })

          const cE = {
                  'age': 34,
          }


          // here we added newDate
          setWaA(prevWaA => {
            ...prevWaA,
            jsonObject: {
              ...prevWaA.jsonObject,
              newDate = cE
            }
          })
          break;
  }
}

CodePudding user response：

Continuing on the answer given by Abhishek, in ReactJS you should take care of using objects and arrays in a functional way, keeping them constants throughout the entire application scope so that you don't change your variables during usage.

This ensures that each step the variable is used in is "new" and unchanged, rather, cloned from the previous value without actually changing the previous one. It's also best because objects and arrays are references in memory and are not actual values, hence if you assign an object or array, you are actually assigning the reference, not the value of it.

With React you can spread the object or array to clone it but take care of the object because it's not a deep clone like Lodash would do, so you have to do as specified by Abhiskek.

import { useState } from 'react'

function Task() {
  const [config, setConfig] = useState(initialObjectConfig)

  useEffect(() => {
    setConfig(prevWaA => {
            ...prevWaA,
            jsonObject: {
              ...prevWaA.jsonObject,
              newDate = cE
            }
          })
  }, [])
}

You can apply the same thought to a Switch statement but if you don't want to keep state immutability you can take a look at immer.js which is a library that can help you achieve exactly what you are looking for.