how to validate props as an array of objects?

Question

Here is part of a component where I pass props as an array of objects:

const data = [
    {
        active: true,
        status: 'Active'
    },
    {
        active: false,
        status: 'Done'
    }
]

<MyComponent myProps={data} />

Here is my component where I'm trying to validate props

import React from 'react'
import { bool, string } from 'prop-types'

const MyComponent = ({ myProps }) => {
    return (
        <div>
            <h1>Hello</h1>
        </div>
    )
}

MyComponent.propTypes = {
    active: bool.isRequired,
    status: string
}

export default MyComponent

The error I'm getting is:

The prop active is marked as required in MyComponent, but its value is undefined

Rafael Buzatto de Campos · Accepted Answer · 2021-01-22 20:32:41Z

1

you are passing down as props myProps.active and status are part of your object shape. With that in mind your propType should look like:

MyComponent.propTypes = {
  myProps: PropTypes.arrayOf(
    PropTypes.shape({
      active: PropTypes.bool.isRequired,
      status: PropTypes.string
    })
  )
}

also remember to import PropTypes at the top:

import PropTypes from 'prop-types';

edited Jan 22, 2021 at 20:32

answered Jan 22, 2021 at 20:21

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Glabb Over a year ago

TypeError: Cannot read property 'arrayOf' of undefined

Rafael Buzatto de Campos Over a year ago

updated my answer. you need also to import PropTypes

John Glabb Over a year ago

OK.. it works when I use PropTypes from 'prop-types' library but not from React: import PropTypes, { bool, string } from 'prop-types'

Rafael Buzatto de Campos Over a year ago

you could destructure all instead like import { bool, string, arrayOf, shape } from 'prop-types', and remove all PropTypes. it's up to your preference :)

zhulien · Accepted Answer · 2021-01-22 20:38:21Z

1

MyComponent.propTypes = {
    myProps: PropTypes.arrayOf(
        PropTypes.shape({
            active: PropTypes.bool.isRequired,
            status: PropTypes.string
        })
    )
    .isRequired
}

edited Jan 22, 2021 at 20:38

answered Jan 22, 2021 at 20:21

zhulien

5,8254 gold badges25 silver badges41 bronze badges

1 Comment

John Glabb Over a year ago

TypeError: Cannot read property 'arrayOf' of undefined

Marcus Yoda · Accepted Answer · 2021-01-22 20:21:34Z

0

I think you need two components, a HOC (High Order Component) that receives your array, with an prop:

MyComponentHoc.propTypes = {
    data: PropTypes.array.isRequired,
};

And then Call to your visual component inside:

const MyComponentHoc = (data) => data.map(MyComponent);

answered Jan 22, 2021 at 20:21

Marcus Yoda

2411 silver badge8 bronze badges

Collectives™ on Stack Overflow

how to validate props as an array of objects?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related