How can I use defaultProps in my React components?

How can I use defaultProps in my React components?

You can use defaultProps to set default values for your component's props. This is useful when you want to ensure that your component has certain values even if they are not provided.

Can you show me an example of how to implement it?

Sure! Here's a simple example:

import React from 'react';

const MyComponent = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

MyComponent.defaultProps = {
  name: 'Guest',
};

In this example, if name is not provided, it will default to 'Guest'.

What if I want to use defaultProps with functional components?

You can still use defaultProps with functional components just like in the example I provided. Just define defaultProps after your component definition.

Are there any limitations to using defaultProps?

Yes, defaultProps only works for props that are not provided. If a prop is explicitly set to undefined, the default value will not be used.