CODEWITHSUNDEEP
reactjsreact-proptypes
midhun k
midhun k

Reputation: 576

React Destructuring with propTypes

I am facing some issues when I tried to do validation with propTypes:

class MediaBrowse extends React.Component {
  render() {
    const { name, age, array } = this.props.data;
    return (<div></div>)
  }
}

And I gave propTypes validation as:

MediaBrowse.PropTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  array: PropTypes.array
};

But it is saying when I run eslint validation as data.name is missing in props validation. Same for all..

From parent component I passed data like Can anyone help to resolve this?

Upvotes: 0

Views: 2638

Answers (2)

JMadelaine
JMadelaine

Reputation: 2964

const { name, age, array} = this.props.data

You do not define props.data anywhere, so it is undefined.

Change MediaBrowse.PropTypes to MediaBrowse.propTypes (lowercase "p"):

MediaBrowse.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  array: PropTypes.array,
}

When you define props, they are accessible inside the props object like so:

const { name, age, array } = this.props

UPDATE:

Your function can be defined with propTypes like so:

MediaBrowse.propTypes = {
  // add this to your existing propTypes
  onSearchText: PropTypes.func,
}

And if you want to define a default function, you can define it like so:

MediaBrowse.defaultProps = {
  // define the params and return type of your function here
  // I have just used this as an example
  onSearchText: () => void
}

Upvotes: 3

hotpink
hotpink

Reputation: 3226

import PropTypes from 'prop-types'

MediaBrowse.propTypes ={
      data: PropTypes.shape({
        name: PropTypes.string,
        age: PropTypes.number,
        array: PropTypes.array,
     })
    }

Upvotes: 2

Related Questions