How do I handle default props with the rest operator in React?

How do I handle default props with the rest operator in React?

You can use the rest operator to collect props and set default values. Here's an example:

const MyComponent = ({ name = 'Default Name', ...rest }) => {
  return <div>{name} {JSON.stringify(rest)}</div>;
};

In this example, if name is not provided, it defaults to 'Default Name'.

Can you explain how the rest operator works in this context?

Sure! The rest operator (...rest) collects all remaining props that are not explicitly destructured. This allows you to pass additional props to your component without needing to define them all individually.

What if I want to set default values for multiple props?

You can set default values for multiple props by destructuring them individually. For example:

const MyComponent = ({ name = 'Default Name', age = 30, ...rest }) => {
  return <div>{name}, {age} {JSON.stringify(rest)}</div>;
};

Are there any limitations to using the rest operator with default props?

One limitation is that you cannot set default values for props that are collected by the rest operator. You need to define them explicitly before using the rest operator.