Question 315444 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to map through an array of charts from charts-js using react

I’ve used a map function a million times but this is eluding me.

  • I have an accordion that maps out the chart titles so I can pick what I want – Works
  • Once I pick a chart, it displays it on the viewer net to it – works
  • If I want to save this to my pinnedcharts collection, I click on the pin and it adds it to the pinnedcharts array -works- sort of

Problem:

If you inspect the console, the pinnedcharts array actually contains different charts (depending how many you pinned). But on the screen, all of the charts showing are the same (current) chart.

You’d have to see the codepen linked below for this to make more sense but here is the mapping

{pinnedcharts.map((chart, index) => {
    return (
        <Grid item md={6} key={index}>
            <Box>
                <CardContent>
                    <Box>
                        <Grid
                            container
                            spacing={2}
                            direction="row"
                            justifyContent="space-between"
                            alignItems="center"
                          >
                            <Grid item xs>
                              <Typography variant="h5">
                                {chart.title}
                              </Typography>
                            </Grid>
                            <Grid item xs={1}>
                              <IconButton
                                color="primary"
                                size="small"
                                onClick={handlePinnedPin}
                              >
                                {pinned ? <LuPin /> : <LuPinOff />}
                              </IconButton>
                            </Grid>
                        </Grid>
                        <Line options={options} data={wbrdata} /> //{chart.wbrdata} doesn't work.
                    </Box>
                </CardContent>
            </Box>
        </Grid>
    );
})}

The error on {chart.wbrdata} has to do with not being able to map it, which makes sense because wbrdata is an object, not an array but it wbrdata works on the viewer, it knows to select the datasets inside wbrdata by way of how chartsjs is constructed

If you see the title and Id are mapped correctly. Not the Datasets

I appreciate any help in advanced

CODEPEN

Tags:

2

Answers


  1. 0

    Passing chart directly to the Line component data prop inside your pinnedCharts.map should do the trick.

    After a quick look at your provided codesandbox,
    the reason that wbrdata property on the chart object doesn’t exist, is because it’s never added as a new property to the pinned chart.

    It’s instead appended as a full chart object to the list of pinned charts, which you can access when you map the pinnedCharts array.

    Hope this helps.

    Login or Signup to reply.
  2. 0

    It seems like you’re encountering an issue where the state of your charts is not updating correctly when you pin a new chart to your pinnedcharts array.

    The issue might be due to the fact that the Line component from Chart.js in React is not receiving the correct data props for each individual chart, or there might be a problem with the state management in your application.

    const MyChartsComponent = () => {
  const [pinnedcharts, setPinnedCharts] = useState([]);

  // This function should handle the logic to pin a chart
  // It should update the state with the new list of pinned charts
  const handlePinnedPin = (chartToPin) => {
    // Logic to update pinnedcharts array
    // For example, if you want to toggle the pin status
    setPinnedCharts(prevCharts => {
      if (prevCharts.includes(chartToPin)) {
        return prevCharts.filter(chart => chart !== chartToPin);
      } else {
        return [...prevCharts, chartToPin];
      }
    });
  };

  return (
    // Your return value 
  );
};

// Helper function to determine if a chart is pinned
const isChartPinned = (chart) => {
  // Your logic
};

export default MyChartsComponent;

    Hope this can help you!!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search