Return the previous state of a dynamically created nested object, using React Hooks?

Question

I have a state object that I would like to dynamically create a key and an object inside the key. It needs to be an object so it is dynamic for the parent components and return the previous state. The Key is dynamic based off the parent component. The setState as of right now works as expected creating the dynamic parts of the state however, returning the state inside the nested object is where i'm confused. The state as of right now overrides the previous state.

Here is some code...

import React, { useState, useCallback } from "react";
import { FormGroup, CustomInput } from "reactstrap";
import UniqueString from "unique-string";

function Ratings({ parentCheckedGood, parentCheckedNA, question, section }) {
  const [state, setState] = useState({});
  //THE ISSUE IS INSIDE THIS ONCHANGE FUNCTION
  const onChange = useCallback(
    (e) => {
      const { name, value } = e.target;
      // The state structure works as expected but getting the previous nested state is the issue
      setState((state) => ({
        ...state,
        [section]: { ...state[section], [question]: value },
      }));
    },
    [section, question]
  );
  console.log(state);
  const string = UniqueString();
  return (
    <div>
      <FormGroup required>
        <div>
          <CustomInput
            // checked={parentCheckedGood}
            onChange={onChange}
            type="radio"
            id={string + "1"}
            name={question}
            value="Good"
            label="Good"
          />
          <CustomInput
            onChange={onChange}
            type="radio"
            id={string + "2"}
            name={question}
            value="Fair"
            label="Fair"
          />
          <CustomInput
            onChange={onChange}
            type="radio"
            id={string + "3"}
            name={question}
            value="Poor"
            label="Poor"
          />
          <CustomInput
            // checked={parentCheckedNA}
            onChange={onChange}
            name={question}
            type="radio"
            id={string + "4"}
            value="N/A"
            label="N/A"
          />
        </div>
      </FormGroup>
    </div>
  );
}

export default Ratings;

Edit:

For anyone needing an example of the state. The state structure looks like this: This is just an example, you can't access it with dot notation.

state = {
    section: {name: value}
  }

Answer:

After doing some debugging I found out that what I had was the correct way to do it. I had another onChange function in the parent that was conflicting with the setState. If anyone is looking for a dynamic way to create a state this is probably the best way to do it. Without creating extra setStates.

Answer 1

all customInput share the same state; if childen component return the state which has the same key,they will overide the previous;