Question

How do you give a prop a default value in a function component?

function Avatar({ size = 40, alt = "" }) {
  return <img width={size} height={size} alt={alt} />;
}

Accepted Answer

With default values in props destructuring

Answer

With Avatar.defaultProps, the recommended modern way

Answer

Props can't have defaults; the parent must always pass them

How do you give a prop a default value in a function component?

Explanation