Question

What are default props in ReactJS?

Answer 1

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 props. That means, If you provide null value then it remains null value.

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

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