reactjsreact-proptypes

React PropTypes with multiple level object


I have a deep object (multi-level) from React Router4 - 'props.match.params.type'. I'm not sure how to do prop validation on such a deep object. I've seen .shape() but I'm not sure if this caters for depth.

const Register = (props) => {
console.dir(props)
console.log(props.match.params.type)

return (
    <>
        <RegisterMeta />
        <section className="register">
            Register
        </section>
    </>
)
}

Register.propTypes = {
    type: PropTypes.string.isRequired
}

export default React.memo(Register)

Solution

  • You can indeed use .shape() to define objects like this:

    Component.propTypes = {
      objectType: PropTypes.shape({
        stringType1: PropTypes.string.isRequired,
        stringType2: PropTypes.string.isRequired,
        nestedObjectType: PropTypes.shape({
        //... and so on ...
        }).isRequired
      }).isRequired
    }