Array Prop Undefined - Mapping Array In Props-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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.