How do I handle default prop values in React?

How do I handle default prop values in React?

In React, you can handle default prop values using the defaultProps property or by setting default values in the function parameters.

Can you show me an example of using defaultProps?

Sure! Here's a simple example:

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

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

This way, if no name prop is provided, it defaults to 'Guest'.

What about using default values in function parameters?

You can also set default values directly in the function parameters like this:

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

This achieves the same result!

Are there any best practices for using default props?

Yes! It's best to use default props for optional values, keep them simple, and document them for clarity.