I am expecting to map over an array, and pass the data to a child component. The undesired outcome is it reads as undefined.
Parent Component:
import Tier from "./tier";
const data = [
{
title: "SAVER SALLY",
subtitle: "22,000rmb/month",
list: [
"Income Tax: 3,295",
"Income Tax: 3,295",
],
bottom: {
title: "Total Yearly Savings:",
centralNumber: "144,480RMB",
subtitle: "This is approximately £16,000 or 21,000USD",
},
}
];
const Tiers = ({ classes }) => {
return (
<>
{data.map(set => <Tier objectInformation={set} />)}
</>
)
}
export default withStyles((theme) => ({}))(Tiers);
The Child Component:
const Tier = ({ classes, objectInformation }) => {
const {title, subtitle, list, bottom} = objectInformation
console.log("OBJECT INFORMATION", objectInformation)
return (
<div>{title}</div>
)
}
The end goal is to have multiple objects in the data variable, that'll pass down as props to Tiers, the parents component.
You can't render an object within a component in React.
Either stringify your object
const Tier = ({ classes, objectInformation }) => {
return (
<div>{JSON.stringify(objectInformation)}</div>
)
}
or only select a part of it.
const Tier = ({ classes, objectInformation }) => {
return (
<div>{objectInformation.title}</div>
)
}
Solution
I missed an s on the imports.
Incorrect: import Tiers from "components/tiers/tier"
Correct: import Tiers from "components/tiers/tiers"
Changing this fixed the issue.