Home > Mobile >  ESLint error: "Missing props in validation" in React ( Replacing it by PropTypes.checkProp
ESLint error: "Missing props in validation" in React ( Replacing it by PropTypes.checkProp

Time:09-24

Just installed ESLint and it gave me a bunch of errors

for example I have this code here .:

Ingredient.propTypes = {
  ingredientsTouched: PropTypes.bool,
  ingredientItem: PropTypes.string,
  data: PropTypes.array(PropTypes.string),
  text: PropTypes.string,
  ingredientSetItem: PropTypes.bool,
  ingredientIsInValid: PropTypes.arrayOf(
    PropTypes.shape(PropTypes.bool, PropTypes.string)
  )
}

This is gonna give me another error

Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them.

So I convert it to the new format

 const myPropTypes = {
  ingredientsTouched: PropTypes.bool,
  ingredientItem: PropTypes.string,
  data: PropTypes.array(PropTypes.string),
  text: PropTypes.string,
  ingredientSetItem: PropTypes.bool,
  ingredientIsInValid: PropTypes.arrayOf(
      PropTypes.shape(PropTypes.bool, PropTypes.string)
 )
};

const props = {
  ingredientsTouched: true, 
  ingredientItem: 'apple'
  //etc... 
}; //I guess this is just some test examples to demonstrate if our props are valid or not 
     but these are not the actual props of course


PropTypes.checkPropTypes(myPropTypes, props, 'prop', 'Ingredient');

But this will result in the original error: "Missing props in validation" as EsLint is not picking it up

CodePudding user response:

you have typo, use arrayOf instead of array

data: PropTypes.arrayOf(PropTypes.string),
  • Related