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

javascript reactjs components
Kosmetika picture Kosmetika · Jan 15, 2016 · Viewed 28.8k times · Source

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

Jap Mul picture Jap Mul · Jan 15, 2016

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

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

Related questions

React component initialize state from props

In React, are there any real differences between these two implementations? Some friends tell me that the FirstComponent is the pattern, but I don't see why. The SecondComponent seems simpler because the render is called only once. First: import React, { …

Read More
React: Passing down props to functional components

I have a seemingly trivial question about props and functional components. Basically, I have a container component which renders a Modal component upon state change which is triggered by user click on a button. The modal is a stateless functional …

Read More
React - Can A Child Component Send Value Back To Parent Form

The InputField & Button are custom components that go into a form to create a form. My issue is how do I send the data back up to form so that on button click, I can fire ajax on the …

Read More