React component with list - reactjs

Question

I have created a Card component which also involves a list inside, a bit of this code below:
Card.js
export const Card = ({ feature }) => {
*some code*
return (
*some code*
<ul role="list" className="mt-6 space-y-6">
<li className="flex">
<CheckIcon className="flex-shrink-0 w-6 h-6 text-yellow-500" aria-hidden="true" />
<span className="ml-3 text-gray-500">{feature}</span>
</li>
</ul>
)
}
Now I use Card.js in another component ManyCards.js
const pricing = {
tiers: [
{
features: [
'Unlimited products',
'Unlimited subscribers',
'Advanced analytics',
'1-hour, dedicated support response time',
'Marketing automations',
'Custom integrations',
],
}
]
}
export default function ContractInfo() {
return (
<div className={formStep === 0 ? 'block' : 'hidden'}>
<div className="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
<div className="mt space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
{pricing.tiers.map((tier) => (
<Card
feature={tier.features.map((feature) => ())}
/>
))}
</div>
</div>
</div>
}
How do I get all features listed? I assume with map, but how exactly? I am super new to react. These are just bits of code, to demonstrate the issue, I am only stuck with the features.

Answer 1

iterate array using map similar to pricing.tiers just pass tier.features
export const Card = ({ feature }) => {
return (
<>
return (
<ul role="list" className="mt-6 space-y-6">
<li className="flex">
<CheckIcon
className="flex-shrink-0 w-6 h-6 text-yellow-500"
aria-hidden="true"
/>
<span className="ml-3 text-gray-500">{feature}</span>
</li>
</ul>
);
</>
);
};
export function ContractInfo() {
return (
<div className={formStep === 0 ? "block" : "hidden"}>
<div className="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
<div className="mt space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
{pricing.tiers.map((tier) => (
<Card
feature={pricing.tiers.map((tier) => (
<>
{tier.features.map((feature) => (
<Card feature={feature} />
))}
</>
))}
/>
))}
</div>
</div>
</div>
);
}