error TS2304: Cannot find name : passing parameters to React Functional Component - reactjs

Question

With this code:
import ReactEChartsCore from 'echarts-for-react/lib/core';
// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';
// import components, all suffixed with Component
import {
GridComponent,
TooltipComponent,
TitleComponent,
DatasetComponent,
} from 'echarts/components';
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
CanvasRenderer,
} from 'echarts/renderers';
function App_D() {
const options = {
grid: { top: 8, right: 8, bottom: 24, left: 36, containLabel: true },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
//type: 'bar',
//type: 'radar',
smooth: true,
},
],
tooltip: {
trigger: 'axis',
},
};
return (
<div className='container'>
<h1 className='heading'>
Data & Context Visualization
</h1>
<ReactECharts option={options} />;
</div>
);
}
export default App_D;
I get a correct chart.
But with this code:
echarts.tsx :
import ReactECharts from 'echarts-for-react'
// import the core library.
import ReactEChartsCore from 'echarts-for-react/lib/core';
// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';
// import components, all suffixed with Component
import {
GridComponent,
TooltipComponent,
TitleComponent,
DatasetComponent,
} from 'echarts/components';
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
CanvasRenderer,
} from 'echarts/renderers';
interface Props {
chartType: string;
seriesData: number[];
xAxisType: string;
xAxisData: string[];
}
export default function EchartDeploy({
chartType,
seriesData,
xAxisType,
xAxisData
}: Props) {
React.useEffect(() => {
echarts.use(
[TitleComponent, TooltipComponent, GridComponent, CanvasRenderer]
)
}, [])
const options = {
grid: { top: 8, right: 8, bottom: 24, left: 36, containLabel: true },
aAxis: {
type: xAxisType,
data: xAxisData,
},
yAxis: {
type: 'value',
},
series: [
seriesData,
chartType,
],
tooltip: {
trigger: 'axis',
},
}
return (
<ReactECharts option={options} />
);
}
App_D.tsx :
import EchartDeploy from './dataVisualize/echarts'
function App_D() {
let [chart_type, setChart_type] = React.useState("")
let [series_data, setSeries_data] = React.useState<number[]>([])
let [xAxis_type, setXAxis_type] = React.useState("")
let [xAxis_data, setXAxis_data] = React.useState<string[]>([])
setChart_type('line')
setSeries_data([820, 932, 901, 934, 1290, 1330, 1320])
setXAxis_type('category')
setXAxis_data(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
return (
<div className='container'>
<h1 className='heading'>
Data & Context Visualization
</h1>
<EchartDeploy
chartType={chart_type}
seriesData={series_data}
xAxisType={xAxis_type}
xAxisData={xAxis_data}
/>
</div>
);
}
export default App_D;
I get no errors messages anymore, but also no chart.
What am I doing wrongly? How to pass the parameters to the React functional component?

Answer 1

function App_D() {
//here should be defind all of yours useStates() for chart_type/series_data etc.
useEffect(() => {
//all of your setters
}, []); //with an empty dependency array
return (
<div className='container'>
<h1 className='heading'>
Data & Context Visualization
</h1>
<EchartDeploy
chartType={chart_type}
seriesData={series_data}
xAxisType={xAxis_type}
xAxisData={xAxis_data}
/>
</div>
)