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