Can a default value be used in a proptype shape?

Question

Is it possible to define a type for an object's with a required key value pair and a default key value pair?

Example:

const myComponent = (props) => {
  const {
    myObject: {
      someRequiredString,
      someNotRequiredString,
    }
  }
}

myComponent.propTypes = {
  myObject: PropTypes.shape({
    someRequiredString.string.isRequired,
  }).isRequired,
}

myComponent.defaultProps = {
  myObject: {
    someNotRequiredString: '',
  }
}

Consummation

Usually required field didn't have a default value – Suctorial

True, but how about an object which has both a required and not required field? @VadimHulevich – Consummation

Answer 1

So if i understand you correct, you need non-required object bit if this object exist it's must have 2 required field, and maybe one non-required

So here we are:

componentForUser.propTypes = {
    myObject: PropTypes.shape({
        name:PropTypes.string.isRequired,
        secondName:PropTypes.string.isRequired,
        age:PropTypes.string,
    }),
}

componentForUser.defaultProps = {
    myObject: {
        name: 'defaultName',
        secondName: 'defaultSecondName',
        age:21
    }
}

In this case if User object is not required, instead of this you will get User with properties:

myObject: { name: 'defaultName', secondName: 'defaultSecondName', age:21 }

But if from props you will get object User without name, you catch Warning about required name and secondName.

Suctorial

So the trick is to not set .isRequired on the object in the propTypes. Perfect! – Consummation

Answer 2

Maybe this has changed since this question was asked, but you can't provide defaultProps for a nested value like this.

Remonstrate

No, as per this answer, but there is a workaround explained. – Chemist