How to push elements into array in react state, the array is located inside of object

Question

Push object inside of questions array in data, it gives this errors Uncaught TypeError: data.sections is not iterable at handleClick (SecondStep.tsx:14:1)

 export default function CreateStepper() { const [data, setData] = useState({ name: "", desc: "", sections: [], }); console.log(data); return ( <><SecondStep data={data} setData={setData} /></>) } function SecondStep(data: any, setData: any) { const [addSection, setAddSection] = useState(1); const newSection = { sectionName: "Hdsd", sectionDesc: "dsdsd", question: [], }; const handleClick = () => { setData({...data, sections: [...data.sections, newSection] }); }; return ( <Box> </Box> ); } export default SecondStep;

When I did below code it retuns "Uncaught TypeError: Cannot read properties of undefined (reading 'push')" this type error. How to push new object to the array in React useState. First of all, useState is object inside the object it has questions: [] array how to push the object this array

 const [data, setData] = useState({ name: "", desc: "", sections: [], }); const newSection = { sectionName: "Hello", sectionDesc: "Desc", question: [], }; const handleClick = () => { let copyData = data; copyData.sections.push(newSection); setData(copyData); };

Answer 1

You can get the latest version of the state in the setState Method, where you then can add your object.

const [data, setData] = useState({
    name: "",
    desc: "",
    sections: [],
 });

const newSection = {
    sectionName: "Hello",
    sectionDesc: "Desc",
    question: [],
};

const handleClick = () => {
   setData(data => ({
     ...data,
     sections: [...data.sections, newSection]
   })
 };

But I am actually not quite sure if you need the ...data you might be able to leave that out.

Answer 2

You have to clone the object and then push the elements into the array,

here is the example below,

import "./styles.css";
import React, {useState} from 'react'

export default function App() {

  const [data, setData] = useState({
    name: "",
    desc: "",
    sections: [],
 });

const newSection = {
    sectionName: "Hello",
    sectionDesc: "Desc",
    question: [],
};

const handleClick = () => {
   setData({...data, sections:[...data.sections, newSection]});
 };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={handleClick}>Click</button>
      <h4>Sections: {data.sections[0]?.sectionName}</h4>

    </div>
  );
}

Code Sandbox: https://codesandbox.io/s/react-do7bk?file=/src/App.js:0-572

Answer 3

The answer to you Updated Problem is:

import "./styles.css";
import React, { useState } from "react";

export const CreateStepper = () => {
  const [data, setData] = useState({
    name: "",
    desc: "",
    sections: []
  });

  const SecondStep = (data: any) => {
    const [addSection, setAddSection] = useState(1);
    const newSection = {
      sectionName: "Hdsd",
      sectionDesc: "dsdsd",
      question: []
    };

    const handleClick = () => {
      setData({ ...data, sections: [...data.sections, newSection] });
    };

    return <></>;
  };

  return (
    <>
      <SecondStep data={data} />
    </>
  );
};

export default CreateStepper;

You could also provide SecondStep with the function via the Props If you prefer That this should work to:

export default function CreateStepper() {
  const [data, setData] = useState({
    name: "",
    desc: "",
    sections: [],
  });

  console.log(data);

  return (
    <><SecondStep data={data} setData={setData} /></>)
}


function SecondStep(data: any, setData: (data : any) => void) {
  const [addSection, setAddSection] = useState(1);
  const newSection = {
    sectionName: "Hdsd",
    sectionDesc: "dsdsd",
    question: [],
  };

  const handleClick = () => {
    props.setData({ ...data, sections: [...data.sections, newSection] });
  };

  return (
    <Box>
      
    </Box>
  );
}

export default SecondStep;