I’m encountering a warning related to defaultProps in a React functional component, specifically in a component that uses recharts. The warning message is:
Warning: YAxis: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
Here’s the relevant part of my component:
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from 'recharts';
import { OutputData } from '@/utils/type';
export function Overview({ data }: { data: OutputData[] }) {
const yAxisProps = {
yAxisId: 'strom',
type: 'number',
domain: ['dataMin - 100', 'dataMax + 100'],
unit: ' A',
};
const yAxisRightProps = {
yAxisId: 'abhub',
type: 'number',
domain: ['dataMin-1', 'dataMax+1'],
unit: ' mm',
orientation: 'right',
};
return (
<ResponsiveContainer width='100%' height={400}>
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='t' scale='linear' unit=' ms' />
<YAxis {...yAxisProps} />
<YAxis {...yAxisRightProps} />
<Tooltip />
<Legend />
<Line
yAxisId='strom'
type='monotone'
dataKey='strom'
stroke='#8884d8'
activeDot={{ r: 8 }}
/>
<Line
yAxisId='abhub'
type='monotone'
dataKey='abhub'
stroke='#82ca9d'
/>
</LineChart>
</ResponsiveContainer>
);
}
I’ve tried replacing defaultProps with JavaScript default parameters (yAxisProps and yAxisRightProps objects), but the warning persists.
How can I resolve this warning properly in my Overview component? What is the correct approach to handle default properties in React functional components when using recharts?
Any insights or guidance would be greatly appreciated!