How do I use default props in class components?

How do I use default props in class components?

In React, you can set default props for class components by defining a static property called defaultProps. For example:

class MyComponent extends React.Component {
  static defaultProps = {
    name: 'Guest',
    age: 25
  };

  render() {
    return <div>Hello, {this.props.name}. You are {this.props.age} years old.</div>;
  }
}

Can you give me an example of how it works?

Sure! If you use <MyComponent /> without any props, it will display 'Hello, Guest. You are 25 years old.' If you pass props like <MyComponent name='Alice' age={30} />, it will display 'Hello, Alice. You are 30 years old.'

What if I want to override the default props?

You can easily override default props by passing new values when you use the component. The passed props will take precedence over the default ones.

Is there a way to set default props for functional components?

Yes! For functional components, you can use default parameters in the function definition or set defaultProps on the component itself.