I am currently working on creating information cards using React, where I pass the data through props to a base component.
export default function Home() {
return (
<Box className={styles.container}>
<div className={styles.helpCards}>
<CardBase title={WhatICanDo.title} list={WhatICanDo.links}/>
<CardBase title={LearnToTalkToMe.title} />
<CardBase title={QuickLinks.title} list={QuickLinks.links}/>
</div>
</Box>
In a separate file, I have stored all the necessary information for these cards. Each card has a title and a list of helpful links associated with it.
export const WhatICanDo = {
title: 'O que eu posso fazer?',
links: [
'Reset de Senha',
'Dúvidas Frequentes'
]
}
export const LearnToTalkToMe = {
title: 'Aprenda a falar comigo'
}
export const QuickLinks = {
title: 'Links Rápidos',
links: [
'Reset de Senha',
'Consulta de Ponto',
'Criação de Chamados',
'Consulta de Chamados',
'Dúvidas Frequentes'
]
}
Within the file that handles this information and constructs the base of the cards, I need to map over the received list of links so that they are displayed as individual items inside an (< li >) element.
export default function CardBase({ list, title }) {
const cardsList = [list];
function cardsMap() {
return (
<>
{cardsList.map((card, index) =>
<li key={index}>{card}</li>
)}
</>
)
}
return (
<Card className=''>
<CardContent>
<Typography className='' color='' gutterBottom>
{title}
</Typography>
<Typography className='' variant='' component=''>
{cardsMap()}
</Typography>
</CardContent>
</Card>
);
}
Although everything seems to be set up correctly, I am facing an issue during rendering where all the items in the list are being displayed next to each other instead of vertically stacked as I intended.
Any suggestions on how I can address this problem?