Tengo una tarjeta diseñada en react. La tarjeta debe aparecer a lo largo del proyecto (en diferentes páginas).
Cada tarjeta tendrá diferentes títulos, subtítulos y cantidad.
¿Cómo puedo hacer esto? Pensé en crear un objeto y luego recorrerlo. Llamar al componente de la tarjeta en diferentes páginas, pero esto no me permitirá cambiar el contenido según la página.
Tarjeta.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}EjemploPáginaA.js. (Tarjeta:3, título: TarjetaA, Subtítulo:TarjetaASubtítulo....)
<Card /> <OtherStuff />EjemploPáginaB.js (Tarjeta:2, título: tarjetaB, Subtítulo: TarjetaBSubtítulo....)
<Card /> <OtherStuffB /> <OtherStuffToo />Debe pasar accesorios a su componente de tarjeta para que pueda usarlo varias veces con diferentes datos:
export const Card = (props) => { return ( <div>{props.title}<div/> <div>{props.subtitle}<div/> ) }Y entonces deberías usarlo así:
<Card title="Your title" subtitle="Your subtitle"/>Si desea mapear a través de su matriz de tarjetas, debe abordarlo de esta manera dentro del retorno en su componente principal:
{cards.map((card) => <Card title={card.title} subtitle={card.subtitle}/>)}