How to save a nested object in state in React?-CodePudding

Is there a simple way to save/update state for an entire object model? I want to save a snapshot of this schema every time an object property is updated. I have other components that update the schemas properties (isComplete, progress) already, but i don't know how to save the ENTIRE schema to state, so that when i refresh, all the progress is still there?

I imagine i will need a useEffect hook with setSchema() and maybe a spread operator? I don't have a database yet so i am wanting to store the updated schema in local storage for now.

   
   import course from "./data/index";

   const [schema, setschema] = useState(course);

   useEffect(()=>{
    setschema(???)
   })

const course = {
  courseName: "Course 1",
  courseModules: [
    {
      moduleName: "Module1",
      moduleLessons: [
        {
          lessonName: "Introduction",
          lessonData: Lesson1,
          isComplete: false,
          progress: 0,
        },
        {
          lessonName: "Overview",
          lessonData: Lesson2,
          isComplete: false,
          progress: 0,
        },
 
      ],
      isComplete: false,
      progress: 0,
    },
   
    {
      moduleName: "Module 2",
      moduleLessons: [
        {
          lessonName: "Lesson 1",
          lessonData: "hello There",
          isComplete: false,
          progress: 0,
        },
        {
          lessonName: "Lesson 2",
          lessonData: "hello There",
          isComplete: false,
          progress: 0,
        },
      ],
      isComplete: false,
      progress: 0,
    },
   
  ],
  isComplete: false,
  progress: 0,
};

CodePudding user response：

Not sure I follow, but if I understand correctly you want to save schema to local storage every time it updates?

That can be done like this:

  useEffect(() => {
    localStorage.setItem("schema", JSON.stringify(schema));
  }, [schema]);