React Warning: YAxis: Support for defaultProps will be removed from function components

  Kiến thức lập trình

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!

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT