React.js - default prop is not used with `null` is passed
You can change the null
value to undefined
to use the default value.
<Component bedrooms={bedrooms || undefined} />
I think there's a distinction between null
and undefined
that is made when dealing with the defaultProps
. The null
value could be intended behavior and thus isn't replaced by your defaults, while undefined
is not and will be replaced.
As stated in the docs
[...] used to ensure that this.props.value will have a value if it was not specified by the parent component.
Here is a related issue.
undefined
= nothing.null
= something that hints "nothing".
undefined
doesn't exist in reality. null
however does exist. This means undefined
won't pass a prop value as you cannot pass something which doesn't exist. Since null
is not nothing, but rather is something which only hints at nothing, it passes in props.