How to Fix the ‘React eslint error missing in props validation’ When Developing a React App?

Sometimes, we run into the ‘React eslint error missing in props validation’ when developing a React app.

In this article, we’ll look at how to fix the ‘React eslint error missing in props validation’ when developing a React app.

Fix the ‘React eslint error missing in props validation’ When Developing a React App?

To fix the ‘React eslint error missing in props validation’ when developing a React app, we can set the prop types of the props in the component causing the error.

For instance, we write:

import React from "react";
import PropTypes from "prop-types";

const Foo = ({ someProp, onClick }) => {
  return <div onClick={onClick}>foo {someProp}</div>;
};

Foo.propTypes = {
  someProp: PropTypes.number.isRequired,
  onClick: PropTypes.func.isRequired
};

export default function App() {
  const onClick = () => console.log("clicked");

  return <Foo someProp={2} onClick={onClick} />;
}

to import the prop-types package to let us add prop type validation to the Foo component.

We install it by running:

npm i prop-types

We set the Foo.propTypes property to an object that has the prop names as the keys and the corresponding prop types as the values.

So someProp is a number and it’s required.

And onClick is a function and it’s also required.

Then in App, we render the Foo component with the props passed in.

Now we won’t get any errors from ESLint.

Conclusion

To fix the ‘React eslint error missing in props validation’ when developing a React app, we can set the prop types of the props in the component causing the error.