Using React Context for Chart Data Management

Illustrate the use of React Context to manage and update the data for a chart dynamically, ensuring components consuming the context re-render with the updated data.

import React, { createContext, useState, useContext } from 'react';

// Create a context for the chart data
const ChartDataContext = createContext();

// Provider component wraps around the components that need access to the chart data
export const ChartDataProvider = ({ children }) => {
  const [chartData, setChartData] = useState([]);

  // Function to update chart data
  const updateChartData = (data) => {
    setChartData(data);
  };

  return (
    <ChartDataContext.Provider value={{ chartData, updateChartData }}>
      {children}
    </ChartDataContext.Provider>
  );
};

This snippet creates a React context for chart data management. It exports a provider component, `ChartDataProvider`, which is used to wrap around components that require access to the chart data. It initializes chart data state with an empty array and provides a function to update this state.

import React, { useContext, useEffect } from 'react';
import { ChartDataContext } from './path_to/ChartDataProvider'; // Adjust the import path
import { Line } from 'react-chartjs-2';

const ChartComponent = () => {
  const { chartData } = useContext(ChartDataContext);

  useEffect(() => {
    // This function could be replaced with real data fetching
    const fetchChartData = async () => {
      const data = await someAPI.fetchData();
      updateChartData(data);
    };
    fetchChartData();
  }, []);

  return <Line data={chartData} />;
};

export default ChartComponent;

This component, `ChartComponent`, consumes the chart data from `ChartDataContext` using the `useContext` hook. It uses `useEffect` to simulate fetching new data on mount and displays it using `react-chartjs-2`'s `Line` component. Note: `someAPI.fetchData()` should be replaced with the actual data fetching logic.

import React from 'react';
import { ChartDataProvider } from './path_to/ChartDataProvider'; // Adjust the import path
import ChartComponent from './path_to/ChartComponent'; // Adjust the import path

const App = () => (
  <ChartDataProvider>
    <div className='chart-container'>
      <ChartComponent />
    </div>
  </ChartDataProvider>
);

export default App;

This code illustrates how to use the `ChartDataProvider` to wrap the `ChartComponent` in the application. This setup allows `ChartComponent` to access and display the managed chart data contained within the context provided by `ChartDataProvider`.