In your own case these subcomponents are not necessary and I recommend naming them with plural names (like DashboardCards or OverviewCards) to avoid confusion. But if you ask me, I prefer to work with the smallest components possible. For example In this project I created standalone component named DashboardCard and it contains all the structures, styles and logic of a single card. After that I reached my data array, loop with map and generate single cards for each object in the array. Something like that...
// overViewCards = (arrayOfObjects)
{overViewCards.map(({ platform, title, value, change }, i) => (
<OverViewCard
key={i}
platform={platform}
title={title}
value={value}
change={change}
/>
))}
I hope you learned something new and good luck in your next project.
Marked as helpful