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"
             /> )

David Grosh · Accepted Answer · 2021-09-10 18:43:39Z

2

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 } });

edited Sep 10, 2021 at 18:43

answered Sep 10, 2021 at 18:38

David Grosh

1886 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alish Giri · Accepted Answer · 2021-09-10 18:55:16Z

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"
      />
    </>
  );

Sofiya rao · Accepted Answer · 2021-09-10 19:24:34Z

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>
  );
}

Collectives™ on Stack Overflow

How can i set value in nested object in React?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related