How to use deep copy with parameter

Question

I've asked about this question a while ago and I have faced a problem. What I want to try to do is

add { label: "", data: "", background: "" } into datasets and then I want to update the elements.

So I got the answer that i should use deep copy and i used it like this:

const addAxis = index => {
    setDataContext(dataContext =>
      dataContext.map((data, idx) => {
        return idx === index
          ? {
              ...data,
              datasets: [
                ...data.datasets,
                { label: "", data: "", background: "" },
              ],
            }
          : data;
      })
    );
  };

but the thing is that i passed addAxis function through props like this: addAxis={addAxis(1)} to add in each datasets in DataContext[index] :

DataContext

 const [DataContext, setDataContext] = useState([
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    }, 
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    }, 
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },   {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    }, 
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },
  ]);

but i got Maximum update depth exceeded error so i tried to change addAxis={addAxis(1)} to addAxis={() => addAxis(1)} like this but it's not working and I've tried to find to fix it but i have no idea what I'm wrong. Thank you in advance.

Edit

This is where i pass addAxis :

 const layout = [
    <DataSide id="first" key="1233" onClick={chartItself}>
      <SettingMenu
      index={1}
        show={show[0]}
        chart={chart[0]}
        chartData={DataContext[1]}
        addAxis={addAxis}   ///this is addAxis
        deleteAxis={() => deleteAxis(1)}
        changeTitle={changeTitle(1)}
        changeLabel={changeLabel(1)}
        changeYaxis={changeYaxis(1)}
        changeXaxis={changeXaxis(1)}
        changeLayout={changeLayout}
      />
      {firstDataType.map(
        (id, index) => chart[0].key === id.key && firstDataType[index]
      )}
    </DataSide>,
    <DataSide id="second" key="1234" onClick={chartItself}>
      <SettingMenu
        show={show[1]}
        chart={chart[1]}
        chartData={DataContext[2]}
        addAxis={() => addAxis(2)}
        deleteAxis={() => deleteAxis(2)}
        changeTitle={changeTitle(2)}
        changeLabel={changeLabel(2)}
        changeYaxis={changeYaxis(2)}
        changeXaxis={changeXaxis(2)}
        changeLayout={changeLayout}
      />
      {secondDataType.map(
        (id, index) => chart[1].key === id.key && secondDataType[index]
      )}
    </DataSide>,
    .....
    ..

SettingMenu

 <Link
            to={{
              pathname: `/csvFile/${chart.key}`,
              state: {
                index:index,
                chartData: chartData,
                plugins_title: plugins_title,
                changeLayout: changeLayout,
              },
              data: {
                addAxis: addAxis,
                changeTitle: changeTitle,
                deleteAxis: deleteAxis,
                changeLabel: changeLabel,
                changeYaxis: changeYaxis,
                changeXaxis: changeXaxis,
              },
            }}
          >

This is where i use addAxis as a child component

  <AddBtn>
        {ChartName === "Bar" && (
          <>
            <button onClick={addAxis(index)}>Add Bar </button>
            {Axis.length > 0 && <button onClick={deletebtn}>Delete Bar</button>}
          </>...

Answer 1

I created a mock use case with codesandbox. You can check the code. Click on the button to add an element to the dataset of that particular element.

Basically, what you can do is, pass the props as addAxis={addAxis}, and call the addAxis function in the child like:

onClick={() => addAxis(/* args */)}