Today we will discuss some possible solutions to fix the error react/prop-types X; is missing in props validation. If you are also looking for a solution to that error, consider referring to this article. Now let’s start with how that error happens.

How does the error react/prop-types X; is missing in props validation happen?

This error may, unfortunately, arise when you are using Prop type:

react/prop-types children; is missing in props validation

What are the solutions to fix the error react/prop-types X; is missing in props validation?

React PropTypes is a helpful tool for assisting you in catching mistakes by checking the type of data passed into the component via props.

PropTypes not only assist you in identifying data-related issues between components but also in obtaining documentation outlining the component’s function and how to give data to it.

Solution 1: Modify eslintrc.

This solution is made extremely simple. First of all, you need to open the eslintrc.json file. You then include the react/prop-styles rule in the rules section. You can refer to the example below:

"rules": {

  "react/prop-types": "off"

}

Finally, your react/prop-types for the project have now been disabled. By this method, your error will probably be fixed.

Solution 2: Make react/prop-types inactive.

To fix the error react/prop-types X; is missing in props validation, you can also try disabling react/prop-types

Simply turn off react/prop-types in your code. Your error will be fixed if react/prop-types are disabled. You just need to open your code file and add the line below to the top of your code as shown.

/* eslint-disable react/prop-types */

If your My App.js file, for instance, is giving you errors, you must include the following comment at the top of your code.

/* eslint-disable react/prop-types */

import React from 'react';

class App extends React.Component {

......

Solution 3: Declare the defaultProps and propTypes.

In addition to the two solutions of changing eslintrc and disabling react/prop-types, the following solution you can try is to declare the defaultProps and propTypes in the component you’re using.

You must define this XYZ in your propTypes and defaultProps objects if your component uses this.props.XYZ. If there are numerous, you can combine them using commas, as seen in the figure below, but you must import the code:

import { object, func } from 'prop-types';.

// import { object, func } from 'prop-types'; // Import on top

SomeComponent.defaultProps={

  XYZ:{},

  ABC:{},

  someFunction: () => {}

}

SomeComponent.propTypes = {

  XYZ:object,

  ABC:object,

  someFunction: func

}

Conclusion

Above are the solutions we would like to suggest to you to fix the error react/prop-types X; is missing in props validation. Let us know if this article was helpful to you by leaving your thoughts and opinions below in the comments section. Thank you for reading the article. Good luck!

Read more:

→ Type ‘X’ is missing the following properties from type ‘Y’ – How To Solve It?