I have a card designed in react. The card needs to appear throughout the project (on different pages).
Each card will have different titles, subtitles, and amount.
How can I go about doing this? I thought about creating an object and then looping through it. Calling the card component on different pages, but this won't allow me to change the content depending on the page.
Card.js
const cards = [
{title: Card A, subtitle: Card A Subtitle},
{title: Card A2, subtitle: Card A2 Subtitle},
{title: Card A3, subtitle: Card A3 Subtitle},
]
{cards.map through cards to display it}
ExamplePageA.js. (Card:3, title: CardA, Subtitle:CardASubtitle....)
<Card />
<OtherStuff />
ExamplePageB.js (Card:2, title: cardB, Subtitle: CardBSubtitle....)
<Card />
<OtherStuffB />
<OtherStuffToo />
You must pass props to your card component so that you can use it multiple times with different data:
export const Card = (props) => {
return (
<div>{props.title}<div/>
<div>{props.subtitle}<div/>
)
}
And then you should use it like this:
<Card title="Your title" subtitle="Your subtitle"/>
If you want to map through your cards array you should approach it like this inside of return in your parent component:
{cards.map((card) => <Card title={card.title} subtitle={card.subtitle}/>)}