I have the next code, eslint throw:
react/prop-types onClickOut; is missing in props validation
react/prop-types children; is missing in props validation
propTypes was defined but eslint does not recognize it.
import React, { Component, PropTypes } from 'react';
class IxClickOut extends Component {
static propTypes = {
children: PropTypes.any,
onClickOut: PropTypes.func,
};
componentDidMount() {
document.getElementById('app')
.addEventListener('click', this.handleClick);
}
componentWillUnmount() {
document.getElementById('app')
.removeEventListener('click', this.handleClick);
}
handleClick = ({ target }: { target: EventTarget }) => {
if (!this.containerRef.contains(target)) {
this.props.onClickOut();
}
};
containerRef: HTMLElement;
render() {
const { children, ...rest } = this.props;
const filteredProps = _.omit(rest, 'onClickOut');
return (
<div
{...filteredProps}
ref={container => {
this.containerRef = container;
}}
>
{children}
</div>
);
}
}
export default IxClickOut;
package.json
{
"name": "verinmueblesmeteor",
"private": true,
"scripts": {
"start": "meteor run",
"ios": "NODE_ENV=developement meteor run ios"
},
"dependencies": {
"fine-uploader": "^5.10.1",
"foundation-sites": "^6.2.3",
"install": "^0.8.1",
"ix-gm-polygon": "^1.0.11",
"ix-type-building": "^1.4.4",
"ix-type-offer": "^1.0.10",
"ix-utils": "^1.3.7",
"keymirror": "^0.1.1",
"meteor-node-stubs": "^0.2.3",
"moment": "^2.13.0",
"npm": "^3.10.3",
"rc-slider": "^3.7.3",
"react": "^15.1.0",
"react-addons-pure-render-mixin": "^15.1.0",
"react-dom": "^15.1.0",
"react-fileupload": "^2.2.0",
"react-list": "^0.7.18",
"react-modal": "^1.4.0",
"react-redux": "^4.4.5",
"react-router": "^2.6.0",
"react-styleable": "^2.2.4",
"react-textarea-autosize": "^4.0.4",
"redux": "^3.5.2",
"redux-form": "^5.3.1",
"redux-thunk": "^2.1.0",
"rxjs": "^5.0.0-beta.9",
"rxjs-es": "^5.0.0-beta.9",
"socket.io": "^1.4.8"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-eslint": "^6.0.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"core-js": "^2.0.0",
"cssnano": "^3.7.1",
"eslint": "^2.12.0",
"eslint-config-airbnb": "^9.0.1",
"eslint-import-resolver-meteor": "^0.2.3",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.2.2",
"eslint-plugin-react": "^5.1.1",
"node-sass": "^3.8.0",
"postcss-cssnext": "^2.6.0",
"sasslets-animate": "0.0.4"
},
"cssModules": {
"ignorePaths": [
"node_modules"
],
"jsClassNamingConvention": {
"camelCase": true
},
"extensions": [
"scss",
"sass"
],
"postcssPlugins": {
"postcss-modules-values": {},
"postcss-modules-local-by-default": {},
"postcss-modules-extract-imports": {},
"postcss-modules-scope": {},
"autoprefixer": {}
}
}
}
.babelrc
{
"presets": [
"es2015",
"react",
"stage-0"
],
"whitelist": [
"es7.decorators",
"es7.classProperties",
"es7.exportExtensions",
"es7.comprehensions",
"es6.modules"
],
"plugins": ["transform-decorators-legacy"]
}
.eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb",
"rules": {
"no-underscore-dangle": ["error", { "allow": [_id, b_codes_id] }],
},
"settings": {
"import/resolver": "meteor"
},
"globals": {
"_": true,
"CSSModule": true,
"Streamy": true,
"ReactClass": true,
"SyntheticKeyboardEvent": true,
}
}
S
ometimes we need to write code very neat and clean and sometimes we get some strange error. Here we’ll talk about one
of the very famous error which is ‘Data is missing in props validation’. Sometimes it is hard to resolve. this is a
kind of prop-types error in react. In this article, we will see how we can get rid of this error..
In the react app, when we use this.props.XYZ then we get this error, as you can see in the below snapshot:
is missing in props validation
Why this error — is missing in props validation?
The answer is: Because we haven’t declared the propTypes and defaultProps in this current component.
Solution 1:
The solution is, We need to declare the propTypes and defaultProps in this current component.
As you can see in the below snapshot,
after declaring the propTypes and defaultProps
this error has been removed.
Source: idkblogs.com
How to do this?
In your component, if you are using this.props.XYZ, then you have to declare this
XYZ in your
propTypes and defaultProps object. If these are
so many then you can add this by a comma separated as in the below image, and you need to import the code —
import { object, func } from ‘prop-types’;.
Source: idkblogs.com
Solution 2:
In this solution, we need disable the specific eslint rule that is responsible for this «is missing in props validation» error.
To disable this eslint rule, you need to do following changes in your configuration file or disable project-wide in your file .eslintrc.json:
Add «rules» as an objct and add the key «react/prop-types» and its value to «off».
Solution 3:
Here is the another way to get rid of from the error «is missing in props validation», for this we can import following
eslint command/rule in your file at the top.
For example your are geting error in xyz file, then you need to write below line in that file at the top.
Conclusion:
So, in this article, we learned so many ways to remove this issue. We have romoved the error «is missing in props validation» from our code using so many ways.
So, basically this is a standard to declare the propTypes and defaultProps for your component. The best way to handle
error «is missing in props validation» is to declare the propTypes and defaultProps in your component.
Thats it. Now you will never worry about this kind of errors in React 
Is missing in props validation error message tells the programmer that they have declared the wrong class in their program.
This article will shed light on the reasons and solutions for this error. We’ll begin with the major reasons behind the occurrence of this error.
Contents
- Why Does the Is Missing in Props Validation Error Message Arise?
- – Wrong Class Declaration
- – Imported the Prop Types From “React”
- – Syntax Error
- – Wrong Props Validation
- How To Resolve the Is Missing in Props Validation Error Message?
- – Specify the Prop Types in a Program
- – Ignore the Error
- – Use Correct Functions With Eslintrc.json File
- – Auto Generate the Proptypes
- – Develop React App
- Conclusion
Why Does the Is Missing in Props Validation Error Message Arise?
The reason why the is missing in props validation error message arises is mainly due to syntax errors and invalid props. However, there are multiple other reasons behind the occurrence of this error message, such as wrong class declaration and wrong import of prop types from “react”.
– Wrong Class Declaration
A wrong class declaration or an incomplete class declaration is the main reason why such an error arises. If a class declaration does not define any class members, it is considered incomplete. Until the declaration is finished, the programmer cannot declare any objects of the class type or make references to the members of a class.
However, if the size of the class is not required, an incomplete declaration enables the programmer to make particular references to a class before its definition.
Moreover, it is important for the programmer to define propTypes correctly. Defining the propTypes is dependable on the type of class the programmer wants to declare. Let’s take an example below.
For example:
class IbClickOut extends Components {
statics propTypes = {
children: PropTypes.any,
onClickOut: PropTypes.funcs,
};
componentDid.Mount() {
document.getElementById(‘app’)
.addEventListeners(‘click’, this.handleClick);
}
components.WillUnmount() {
document.getElementById(‘app’)
.removeEventListeners(‘click’, this.handleClick);
}
handleClick = ({ targets }: { targets: EventTargets }) => {
if (!this.containerRefs.contains(targets)) {
this.props.onClickOut();
}
};
containerRefs: HTMLElement;
renders() {
const { children, rest.it } = this.props;
const filtered.Props = _.omit(rest.it, ‘onClickOut’);
return (
<div
{filtered.Props}
ref={containers => {
this.container.Refs = containers;
}}
>
{children}
</div>
);
}
}
export default IbClickOut;
Explanation:
In the above example, the programmer has not declared class properly. It is creating an issue for the compiler. Thus, during the execution process, the compiler will throw an error message in the output.
– Imported the Prop Types From “React”
Another reason why this error message arises is that the programmer tried to import the propTypes directly from “React”. Do not import prop types from the “react” function. It will create a mess in the output of the program.
Moreover, it is better if the programmer imports prop types from prop-types and not from react. Otherwise, they will see warnings in the console. Thus, causing an error to occur. The command that will cause the issue is given below.
Command:
import PropTypes from ‘React’;
– Syntax Error
When it comes to programming, especially complex programs that contain large loop systems, syntax errors will always exist.
They can be anywhere from a small typo mistake to using the wrong functions, files or folders for calling or declaring something within the program. Some “react props validation” errors are listed below.
- Missing in props validation typescript.
- Children’ is missing in props validation typescript.
- Gettoggleallrowsselectedprops is missing in props validation.
- ‘Children’ is missing in props validation eslint.
- Props validation in react function component.
- Missing in props validation react.
– Wrong Props Validation
Another common reason that shows the programmer is missing in props validation error message is when the programmer did not validate props correctly. The incorrect type of props can create issues and unintended failures in the user’s software.
Many developers utilize extensions like TypeScript and Flow since JavaScript lacks a built-in type-checking solution. PropTypes, however, is an internal component of React that handles props validation.
Therefore, validating props correctly is very important for a program to run smoothly. Let us take an example below that shows what command is usually missing that does not validate props in the right way.
For example:
The issue in command: “ID1” is usually missing in props validation in react/prop-types eslint.
Wrong syntax:
…
</div>
How To Resolve the Is Missing in Props Validation Error Message?
In order to resolve the is missing in props validation error message, the programmer has to try multiple solutions, such as: using the correct syntax, specifying the propType correctly.
There are other solutions, such as importing the prop type from react correctly or using the correct functions.
– Specify the Prop Types in a Program
In order to resolve this error message, the programmer has to specify the propType correctly. If propType is not defined or specified, the program will show an error. Therefore, to do that, follow the below procedure carefully.
- Install the prop-types package by using the following command: “npm i prop-types –save”.
- Next, import the prop-types module to the react js
- Lastly, specify the prop types the programmer wants to use while coding.
For a better understanding, let’s take two programs as an example below. One is the wrong example, and the other is correct, so the reader can easily distinguish between the two programs.
Wrong Program:
import styled from ‘styled.components’;
const Styled-Button = styled.button`
color: orange;
border: no border;
background.color: Black;
‘;
const Button = ({ “children” }) => <Styled.Button>{“children”}</Styled.Button>;
Correct program:
import styled from ‘styled.components’;
import PropTypes from ‘prop-types’;
const Styled-Button = styled.button`
color: orange;
border: no border;
background-color: grey;
`;
const Button = ({ children }) => <StyledButton>{children}</StyledButton>;
Button.propTypes = {
children: PropTypes.node.isRequired,
};
– Ignore the Error
Another way to eliminate this error is by using a command that allows the programmers to ignore the error without causing a disturbance in the whole program and its output. The programmer has to add a command in their .eslintrc.js file to successfully ignore the occurrence of the is missing in props validation error message.
Generally, specifying the propType is mostly recommended, but if it is a small project, then simply ignoring the error will also be a good option. Let’s take the example below and make sure the programmer follows the same syntax as given below.
Command and syntax:
Rules: { ‘react/prop-types’: [“off”],
},
– Use Correct Functions With Eslintrc.json File
It is important to use the correct functions with eslintrc.json or .js files in order to get rid of the error message. Since, eslintrc. js is a configuration file for a tool named ESLINT; the programmer has to carefully handle all the functions they use here.
ESLint is a tool for finding patterns in ECMAScript/JavaScript code and reporting them, with the aim of improving consistency and reducing problems.
Therefore, the programmer has to install the prop-types package first and then specify the props in their program. Let’s look at the example below.
For example:
children: Prop-Types.node.isRequired,
};
Export the default functions: Texts({ “children” }) {
return (
<V.Style class.Name=”Santa”>
<p>{“children”}</p>
</V.Style>
);
}
And now, to avoid the error message do not forget to add the eslintrc.json file by using the following syntax in the program.
Syntax:
“react/prop-types”: “off”
}
– Auto Generate the Proptypes
By auto-generating the proptypes, the programmer can successfully eliminate the error message. Moreover, proTypes checking is good to do but ignoring the error message by settings is not recommended at all.
The programmer should never disregard or ignore the error messages. In order to avoid such errors and to auto-generate the prototypes, the programmer has to follow the procedure given below.
- The programmer should use the vscode React PropTypes Generate extension in order to auto-generate the propTypes.
- Proceed by selecting the react component’s
- Now, press the command button + control (for some keyboards, the Windows key is Ctrl +).
- It will then show a Code Action from where the programmer has to select PropTypesGenerate.
- Another way is by pressing shift + command + alt + P in the macOS. And for Windows users, press Windows + command + alt + P.
- Finally, input propType to replace the default type.
– Develop React App
In order to eliminate the ‘React eslint error is missing in props validation error message when developing a React app, the programmer should not set the propTypes of the props in the react component.
By setting it in the react component, an error will occur. Therefore, avoid doing that while developing a React App. Let’s give an example below.
For instance:
function.Header({ set.Is.Adding }) {
return (
<header>
<div><button> set.Is.Adding(True)} class-Name=”Button”>
Add-in Employee
</button>
</div>
</header>)
}
Export default Header
Explanation:
Importing the prop-types package will enable the programmers to add prop type validation to the component and make it operate across various components. Simply execute npm I prop-types in the prompt to initiate this installed prop and restart the development server.
Conclusion
After reading this guide, the reader will be able to know various reasons behind the occurrence of this error message and how they can use multiple solutions to resolve it. Some quick takeaways are:
- Always use the correct commands while working with the .js files and make sure the syntax you’re using is correct. For this purpose, it is recommended to use software designed especially to check syntax errors.
- Ensure the version of the file and software the programmer is using. PropType must be compatible with the .js file or the system software in order to work smoothly.
- Make sure the class the programmer declares in their program is valid and acceptable by the program’s compiler.
The readers can now resolve their similar error messages easily by using this guide as help. Thank you for reading!
- Author
- Recent Posts
Your Go-To Resource for Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL. Meet The Team
Mh, I have this example from your rules documentation for prop-types: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md propTypes works even if it’s not defined as static. Maybe that is not «nice code» but it doesn’t seem to be the problem here.
Here is our ESLint configuration:
{
"settings": {
"react": {
"version": "16.3.14"
}
},
"extends": [
"eslint:recommended",
"plugin:security/recommended",
"plugin:react/recommended"
],
"plugins": [
"jest",
"security"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"parser": "babel-eslint",
"globals": {
"browser": true,
"element": true,
"by": true
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jquery": true,
"jest/globals": true
},
"rules": {
"no-await-in-loop": 2,
"quotes": [2, "single"],
"no-console": 2,
"no-debugger": 2,
"accessor-pairs": 2,
"no-var": 2,
"array-callback-return": 2,
"no-template-curly-in-string": 2,
"semi": [2, "always"],
"complexity": ["error", { "max": 10 }],
"no-trailing-spaces": 2,
"dot-location": [2, "property"],
"eol-last": 0,
"eqeqeq": 2,
"no-unused-vars": 0,
"guard-for-in": 2,
"dot-notation": 2,
"curly": 2,
"default-case": 2,
"consistent-return": 2,
"no-underscore-dangle": 0,
"no-alert": 2,
"no-caller": 2,
"no-eval": 2,
"no-extra-bind": 2,
"no-else-return": 2,
"no-extra-label": 2,
"no-lone-blocks": 2,
"no-implicit-coercion": 2,
"no-param-reassign": 2,
"no-implicit-globals": 2,
"no-octal-escape": 2,
"no-implied-eval": 2,
"no-new-wrappers": 2,
"no-useless-concat": 2,
"no-useless-return": 2,
"no-label-var": 2,
"no-undefined": 2,
"prefer-promise-reject-errors": 2,
"no-invalid-this": 2,
"no-proto": 2,
"no-with": 2,
"no-return-assign": 2,
"no-script-url": 2,
"no-self-compare": 2,
"no-throw-literal": 2,
"no-return-await": 2,
"no-iterator": 2,
"no-multi-spaces": 2,
"no-multi-str": 2,
"no-new-func": 2,
"no-labels": 2,
"global-require": 2,
"handle-callback-err": 2,
"no-mixed-requires": 2,
"no-new-require": 2,
"no-path-concat": 2,
"no-sync": 2,
"key-spacing": ["error", {"afterColon": true}],
"jsx-quotes": ["error", "prefer-double"],
"object-curly-spacing": ["error", "never"],
"prefer-const": ["error", {"destructuring": "any", "ignoreReadBeforeAssign": false}],
"prefer-destructuring": ["error", {"VariableDeclarator": {"array": false,"object": true}, "AssignmentExpression": {"array": true, "object": false}}, {"enforceForRenamedProperties": false}],
"no-duplicate-imports": ["error", { "includeExports": true }],
"arrow-parens": ["error", "as-needed"],
"quote-props": ["error", "as-needed"],
"keyword-spacing": ["error", {"before": true}]
}
}
Your Go-To Resource for Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL. Meet The Team