Question 237218 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – update nested object in react context

I want Update nested object in react context api

this is my context

import { createContext, useState } from "react";
const TeethInfoContext = createContext();

export function TeethInfoProvider({ children }) {
  const [teethInfo, setTeethInfo] = useState({
    11: {
      mesial: true,
      distal: false,
      incisal: false,
    },
  12: {
      mesial: true,
      distal: false,
      incisal: false,
    },
  13: {
      mesial: true,
      distal: false,
      incisal: false,
    },


  return (
    <TeethInfoContext.Provider
      value={{ teethInfo, cordinates, drawShape, setTeethInfo }}
    >
      {children}
    </TeethInfoContext.Provider>
  );
}

export default TeethInfoContext;

how can update single value in this object like {11: mesial } set to false

thanks

i tried many ways to update

tried this function in children

 function drawMesial() {
   
   setTeethInfo({ ...teethInfo, mesial: teethInfo[11].mesial });
}

not working

and tried

function drawShape(param, id) {
     setTeethInfo({ ...teethInfo, param: !teethInfo[id].param });
  }

in context but didnt work

Tags:

2

Answers


  1. 0

    The React documentation suggests using an updater function to change the state based on the previous state.

    setTeethInfo((teethInfo) => {
  let teethInfoTemp = teethInfo;
  teethInfoTemp[11].mesial = false;
  return teethInfoTemp;
})
    Login or Signup to reply.
  2. 0

    You should create a new function to update the values but be careful with the mutability.

    Looks here:

    https://legacy.reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data

    https://legacy.reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data

    function updateTeethInfo(teethId, key, value) {
  setTeethInfo(prevInfo => ({
    ...prevInfo,
    [teethId]: {
      ...prevInfo[teethId],
      [key]: value
    }
  }));
}

    To set {11: mesial} to false, you would call:

    updateTeethInfo(11, 'mesial', false);

    Here is what the code will look like.

    import { createContext, useState } from "react";

const TeethInfoContext = createContext();

export function TeethInfoProvider({ children }) {
  const [teethInfo, setTeethInfo] = useState({
    11: { mesial: true, distal: false, incisal: false },
    12: { mesial: true, distal: false, incisal: false },
    13: { mesial: true, distal: false, incisal: false },
  });

  function updateTeethInfo(teethId, key, value) {
    setTeethInfo(prevInfo => ({
      ...prevInfo,
      [teethId]: {
        ...prevInfo[teethId],
        [key]: value
      }
    }));
  }

  return (
    <TeethInfoContext.Provider
      value={{ teethInfo, updateTeethInfo }}
    >
      {children}
    </TeethInfoContext.Provider>
  );
}

export default TeethInfoContext;

    Of course, you could create a method to modify the complete tooth:

    function updateCompleteTooth(teethId, newInfo) {
  setTeethInfo(prevInfo => ({
    ...prevInfo,
    [teethId]: newInfo
  }));

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search