How to fix Warning: defaultProps will be removed from functional components in a future version in React

interface Props {
  name: string;
  age: number;
  greeting: string;
}

function UserProfile(props: Props) {
  return <div>{props.greeting}, {props.name}!</div>;
}

UserProfile.defaultProps = {
  greeting: 'Hello'
};

interface Props {
  name: string;
  age: number;
  greeting?: string; // Mark as optional
}

function UserProfile({
  name,
  age,
  greeting = 'Hello' // ES6 default parameter
}: Props) {
  return <div>{greeting}, {name}!</div>;
}

interface Props {
  user: {
    name: string;
    role?: string;
  };
  config?: {
    theme: string;
    locale: string;
  };
}

function Dashboard({
  user,
  config = { theme: 'dark', locale: 'en' } // Object default
}: Props) {
  return (
    <div>
      {user.name} - {config.theme} theme
    </div>
  );
}

function Settings({
  config: {
    theme = 'light',
    locale = 'en'
  } = {} // Fallback for undefined config
}) {
  return <div>Theme: {theme}</div>;
}

// Mark defaulted props as optional with ?
interface ButtonProps {
  label: string;        // Required
  variant?: 'primary' | 'secondary'; // Optional with default
  size?: 'sm' | 'md' | 'lg';         // Optional with default
  disabled?: boolean;                 // Optional with default
}

function Button({
  label,
  variant = 'primary',
  size = 'md',
  disabled = false
}: ButtonProps) {
  return (
    <button className={`btn-${variant} btn-${size}`} disabled={disabled}>
      {label}
    </button>
  );
}

npx react-codemod default-props-to-default-parameters src/

# Find all defaultProps usage
grep -r ".defaultProps" src/

{
  "rules": {
    "react/no-default-props": ["error", {
      "functionalComponents": "error"
    }]
  }
}

import { render, screen } from '@testing-library/react';

function Greeting({ name = 'Guest' }: { name?: string }) {
  return <h1>Hello, {name}!</h1>;
}

test('uses default name when prop not provided', () => {
  render(<Greeting />);
  expect(screen.getByText('Hello, Guest!')).toBeInTheDocument();
});

test('uses provided name when prop is given', () => {
  render(<Greeting name="Alice" />);
  expect(screen.getByText('Hello, Alice!')).toBeInTheDocument();
});