The solutions provided when doing my research are based on React class and not React function and I'm just a newbie in React.

From the parent component I'm calling the child component and passing the values as 'data'. In the child component I'm retrieving the value using props.

ParentComponent.js

<ChildComponent data={1}/>

ChildComponent.js

function ChildComponent(props) {
    const { data } = props.data;
    ...
}

The above gives me the following error message:

src\components\ChildComponent\ChildComponent.js Line 5:11: 'data.data' is missing in props validation react/prop-types Line 5:29: 'data' is missing in props validation react/prop-types

Search for the keywords to learn more about each error.

The solutions provided when doing my research are based on React class and not React function and I'm just a newbie in React.

From the parent component I'm calling the child component and passing the values as 'data'. In the child component I'm retrieving the value using props.

ParentComponent.js

<ChildComponent data={1}/>

ChildComponent.js

function ChildComponent(props) {
    const { data } = props.data;
    ...
}

The above gives me the following error message:

src\components\ChildComponent\ChildComponent.js Line 5:11: 'data.data' is missing in props validation react/prop-types Line 5:29: 'data' is missing in props validation react/prop-types

Search for the keywords to learn more about each error.

• javascript
• reactjs

• 2 const { data } = props.data is the equivalent of doing: const dataVariable = props.data.data. Perhaps remove .data. Therefore, updating the code to be const {data} = props – Denno Commented Mar 15, 2022 at 3:35

6 Answers 6

@Denno and @Nick Vu is correct but there might be something else you'll have to add to your child component just before the export.

ChildComponent.propTypes = {
  data: PropTypes.object
};

and add import

import PropTypes from "prop-types";

and change this

function ChildComponent(props) {
    const { data } = props.data;
    ...
}

to

function ChildComponent(props) {
    const data = props.data;
    ...
}

props is collecting all attributes which you pass to ChildComponent

Your data should be like this

function ChildComponent(props) {
    const { data } = props; //object destructuring
    ...
}

Or like this

function ChildComponent(props) {
    const data = props.data //access data directly and assign a new variable
    ...
}

in my case, I add missing import * as React from 'react'; resolved this

you should learn something about ES6（Destructuring Assignment）, if you want to konw this meaning about const { data } = props.data

or simple chang code to this

function ChildComponent(props) {
    const data = props.data 
}

when eslint show missing prop validation then use this config in eslintrc file.. { "rules":"react/prop-types":"off", }

or add this top of the file where you need to disable this eslint rules

/eslint-disalbe react/props-types/

that's all about eslint prop/types missing. I think it will resolve your problem

Go to your ESLint config file (eslint.config.js) and add the following code under export default -> rules:

export default {
  // Other ESLint configurations (if any)
  rules: {
    // Other rules...
    
    // Disabling prop-types rule as it's unnecessary for the project
    "react/prop-types": "off"
  }
};

This will disable the react/prop-types rule globally in your project.enter code here