How do you default default props for an optional child property of a required prop in React?

Viewed 1892

I have a required object, but not all of it's children are required.

For example, this is what I'm trying to do:

import PropTypes from 'prop-types';

const propTypes = {
  bike: PropTypes.shape({
    id: PropTypes.number.isRequired,
    color: PropTypes.string
  }).isRequired
}
const defaultProps = {
  bike: {
    color: 'red'
  }
}

In this example, I'm trying to say that the bike object is required with an id, but the color is not required and will be red by default.

With my ESLint rules (AirBnb's default set for the most part), I get the following error:

defaultProp "bike" defined for isRequired propType. (react/default-props-match-prop-types)

Any ideas on how to do this properly?

1 Answers
Related