Search code examples
javascriptreactjs

missing in props validation react/prop-types


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.


Solution

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