How can i set value in nested object in React?

Question

how can I set value from text Input to option[0].title when user input? I tried in many way and get error. Please help me to fix this issue.

       const [options, setOptions] = useState({
         0: {
           title: "",
         },
         2: {
           title: "",
          1: {
           title: "",
         },    },
         3: {
           title: "",
         },
         title: "",   });
     
       let name, value;
     
       const handleChange = (e) => {
         name = e.target.name;
         value = e.target.value;
         setOptions({ ...options, [name]: value });   };


        return ( <TextInput
               type="text"
               name="0"
               value={options[0].title}
               onChange={handleChange}
               required
               placeholder="something"
               icon="check_box_outline_blank"
             /> )

Answer 1

I tried to check this on codesandbox and found a solution -
The name that you have updated here is string and the json has number keys. Which was the reason why it wouldn't update on title node. Also you never said .title = value, which is why values got directly updated to the options[0] element

export default function App() {
  const [options, setOptions] = useState({
    0: {
      title: ""
    },
    2: {
      title: "",
      1: {
        title: ""
      }
    },
    3: {
      title: ""
    },
    title: ""
  });
  const handleChange = (e) => {
    const name = e.target.name,
      value = e.target.value;
    let updatedOptions = { ...options };
    updatedOptions[Number(name)].title = value;
    setOptions(updatedOptions);
  };
  return (
    <div className="App">
      <input
        type="text"
        name="0"
        value={options[0].title}
        onChange={handleChange}
        required
        placeholder="something"
        icon="check_box_outline_blank"
      />
    </div>
  );
}

Answer 2

Fully working code,

const [options, setOptions] = useState({
    0: { title: "" },
    2: {
      title: "",
      1: { title: "" },
    },
    3: { title: "" },
    title: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    options[+name].title = value;
    setOptions({...options});
  };

  return (
    <>
      <input
        type="text"
        name="0"
        value={options[0].title}
        onChange={handleChange}
        required
        placeholder="something"
        icon="check_box_outline_blank"
      />
      <input
        type="text"
        name="2"
        value={options[2].title}
        onChange={handleChange}
        required
        placeholder="something"
        icon="check_box_outline_blank"
      />
    </>
  );

Answer 3

you just have to edit the title in the object:

const handleChange = (e) => {
  name = e.target.name;
  value = e.target.value;
  setOptions({ ...options, [name]: { title: value } });   
};

and if you need the previous information from the targeted name, spread within that object too:

setOptions({ ...options, [name]: { ...options[name], title: value } });