How can I update setState?

Question

I'm trying to pass setChart to ChartType and i want to update setChart in ChartType component. so I tried to use array with null, but for some reason, I get this error : TypeError: setChart is not a function so How can I update setChart to change the chart with a different div ??

ChartTypePage

const ChartTypePage = ({ changeLayout }) => {
const [chart, setChart] = useState([
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
  ]);
  
  const layout = [
    <Side id="first" key="a" onClick={chartItself}>
      <ChartType visible={visible[0]} setChart={setChart[0]} />
      {chart[0]}
    </Side>,
    <Side id="second" key="b" onClick={chartItself}>
      <ChartType visible={visible[1]} setChart={setChart[1]} />
      {chart[1]}
    </Side>,
    <Side id="third" key="c" onClick={chartItself}>
      <ChartType visible={visible[2]} setChart={setChart[2]} />
      {chart[2]}
    </Side>,

ChartType

const ChartType = ({ visible, setChart }) => {
const chartType = [
    <Bar
      key="p"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Line
      key="p"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Radar
      key="p"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />]
    return (
    <TypeBox visible={visible}>
      <div>
        <div onClick={() => setChart(chartType[0])}>
          <h3>Line</h3>
        </div>
        <div onClick={() => setChart(chartType[1])}>
          <h3>Bar</h3>
        </div>
        <div onClick={() => setChart(chartType[2])}>
          <h3>Radar</h3>
        </div>
        <div onClick={() => setChart(chartType[3])}>
          <h3>Pie</h3>
        </div>
      </div>
    </TypeBox>
  );
};

export default ChartType;

Within `setChart={setChart[1]}` you are passing down an element of the array which seems to be `null` to me. That's the reason why it's not a function. — norbitrial, Jul 22 '21 at 04:52
https://stackoverflow.com/questions/43638938/updating-an-object-with-setstate-in-react?rq=1 — TheRakeshPurohit, Jul 22 '21 at 05:53

Drew Reese · Accepted Answer · 2021-07-22T06:39:52.177

Issue

The issue here is that setChart in the ChartTypePage parent component is a function, so setChart[0] doesn't make any sense, it's undefined.

Solution

From what I can tell it seems like you want to pass a callback to the ChartType child component, setChart={setChart}. This is the state updater function that the children are invoking on click.

const layout = [
  <Side id="first" key="a" onClick={chartItself}>
    <ChartType visible={visible[0]} setChart={setChart} />
    {chart[0]}
  </Side>,
  ...
];

Update

In the child component you are mutating the state invariant from an array (where chart[i] is null) to the type of chartType[j]. You likely really want to update a specific index in the chart array.

Example:

<div
  onClick={() => setChart(charts => charts.map(
    (chart, i) => i === 0 ? chartType[0] : chart,
  )}
>
  <h3>Line</h3>
</div>

This will lead to a lot of code duplication since each onClick callback function will essentially be the same except for the index you want to update. Abstract this into a function and define it in the parent and pass instead of the setChart callback.

Example:

This is a curried function that first takes an index to close over in scope and return a function that then takes a char type to also close over in scope and then finally return a function to be used as the attached callback.

Note how the index is closed over when passing to the child, and then the child closes over the chart type.

const updateChart = index => chartType => () => {
  setChart(charts => charts.map(
    (chart, i) => i === index ? chartType : chart,
  );
};

...

const layout = [
  <Side id="first" key="a" onClick={chartItself}>
    <ChartType visible={visible[0]} setChart={updateChart(0)} />
    {chart[0]}
  </Side>,
  ...
];

Child

<div onClick={setChart(chartType[0])}>
  <h3>Line</h3>
</div>

Thanks Sir! , I did as same as this answer but for some reason, `chart[0]` is undefined — Somi, Jul 22 '21 at 06:22
@Somi On the initial render `chart[0]` is at least `null`. It's updated later. Is this what you are seeing? Also, when you update state in the child, shouldn't you be updating a specific index of the `chart` state? You've 8 elements in the `chart` array, but only 4 divs in the child. — Drew Reese, Jul 22 '21 at 06:23
it's null when I don't click to change `setChart` to `chartType[0]` but when I click it then it changes to `undefined` — Somi, Jul 22 '21 at 06:26
@Somi Because you update `chart` state from an array to `chartType[0]` which is some JSX, and so then index `n` of the new value is now undefined. — Drew Reese, Jul 22 '21 at 06:28
Thank you so much Sir ! then How can I make it to be changed?? — Somi, Jul 22 '21 at 06:33
@Somi I just updated my answer to include my best guess at what and how you should try to update the state in the parent component. — Drew Reese, Jul 22 '21 at 06:40

How can I update setState?

1 Answers1

Issue

Solution

Update