javascript - 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?

question from:https://stackoverflow.com/questions/34809178/react-js-default-prop-is-not-used-with-null-is-passed

Answer 1

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

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