Default props in functional components

Functional components are a great way to create simple and reusable UI elements in React. They allow you to write simple and concise code and are often a good choice for small components that don't need complex state management.

One of the features that make functional components even more powerful is the ability to define default props. Default props are values that are used when a prop is not explicitly provided by the parent component. This allows you to create more flexible and resilient components that are less likely to break due to missing props.

Defining default props

To define default props in a functional component, you can use the defaultProps property. This property should be an object that contains the default values for each prop.

Here's an example:

import React from 'react';

function Button(props) {
  return <button style={{ backgroundColor: props.color }}>{props.label}</button>;
}

Button.defaultProps = {
  color: 'blue',
  label: 'Click me',
};

In this example, the Button component has two default props: color and label. If the parent component doesn't provide these props, they will be set to 'blue' and 'Click me', respectively.

Using default props

To use default props, simply don't provide the corresponding props in the parent component. For example:

import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
      <Button />
      <Button color="red" label="Danger" />
    </div>
  );
}

In this example, the first Button component doesn't provide any props, so it will use the default values for color and label. The second Button component explicitly provides the color and label props, so they will be used instead of the defaults.

Benefits of default props

Using default props in your functional components has several benefits:

• It makes your components more resilient to missing props. If a parent component forgets to provide a prop, the default value will be used instead of causing a runtime error.

• It allows you to define sensible defaults for your props, making your components more flexible and easier to reuse. For example, a Button component might have a default color of 'blue', but it can easily be customized by the parent component by providing a different color prop.

• It makes your code more concise by eliminating the need for conditional logic to handle missing props.

Overall, default props are a great feature to use in your functional components to make them more robust and flexible.