What are default props?

The defaultProps can be defined as a property on the component to set the default values for the props. These default props are used when props not supplied(i.e., undefined props), but not for null or 0 as props. That means, If you provide null value then it remains null value. It's the same behavior with 0 as well.

For example, let us create color default prop for the button component,

function MyButton {
// ...
}

MyButton.defaultProps = {
color: "red",
};

If props.color is not provided then it will set the default value to 'red'. i.e, Whenever you try to access the color prop it uses the default value

function MyButton() {
return <MyButton />; // props.color will contain red value
}