missing in props validation react/prop-types-CodePudding

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.

CodePudding user response：

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
    ...
}

CodePudding user response：

@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;
    ...
}

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

CodePudding user response：

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 
}