I am passing props from one child component to another and render the data in a parents.
Below is where I am capturing data
import React, { useState } from 'react';
import CSVUpload from './Components/CSVUpload';
import AreaChart from '../Dashboard2/DashboardCharts/AreaChart';
import Dashboard2 from '../Dashboard2/Dashboard';
export default function DataStorage(){
const [csvData, setCSVData] = useState([]);
const handleCSVDataLoaded = (data) => {
setCSVData(data);
};
return(
<>
<h1>CSV Upload Example</h1>
<CSVUpload onDataLoaded={handleCSVDataLoaded} />
</>
)
}
Here I can upload data. This works well. Now I want to pass the data to the following child
import React from 'react';
import Paper from '@mui/material/Paper';
import Chart from 'react-apexcharts';
const AreaChart = (props) => {
const csvData = props.csvData;
// Extract the necessary data from 'csvData' for the plot
const categories = csvData.slice(1).map(item => item[0]);
const data_ = csvData.slice(1).map(item => item[1]);
console.log(categories)
const data_series_name = 'Value'; // Provide a name for the series
const options = {
xaxis: {
type: 'datetime',
categories: categories,
},
dataLabels: {
enabled: false, // Set to false to turn off the display of values
},
chart: {
toolbar: {
show: true, // Turn off the download option
},
},
};
const series = [
{
name: data_series_name,
data: data_,
},
];
return (
<Paper elevation={4}>
<Chart options={options} series={series} type="area" height={500} />
</Paper>
);
};
export default AreaChart;
and I want to render here
import React from 'react';
import AreaChart from '../Dashboard2/DashboardCharts/AreaChart';
const RenderPlot = () => {
return (
<div>
<h2>PLOT</h2>
<AreaChart />
</div>
);
};
export default RenderPlot;
How can I make it work ? it is not working the way I expecting. Meaning the AreaChart should be rendered on the desired section only
