React.js - default prop is not used with `null` is passed

Question

I have default props in my React component:

PropertyTitleLabel.defaultProps = {     bedrooms: 1,     propertyType: 'flat' }; PropertyTitleLabel.propTypes = {     bedrooms: PropTypes.number,     propertyType: PropTypes.string }; 

But when I'm passing null to bedrooms like:

const bedrooms = null; // in real world API returns `null` <Component bedrooms={bedrooms} /> 

It's not replaced with default prop :( Any ideas?

Answer 1

You can change the null value to undefined to use the default value.

<Component bedrooms={bedrooms || undefined} /> 

Answer 2

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.