Estoy creando algunas tarjetas de información a través de React y estoy pasando la información a través de accesorios a un componente base.
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>Tengo un archivo separado donde guardo esta información. La tarjeta tiene principalmente un título y una lista de enlaces útiles.
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' ] }Dentro del archivo que captura la información y ensambla toda la base de estas tarjetas, necesito hacer un mapa de la lista de enlaces recibidos, para que todos estén en forma de artículos (< li >).
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> ); }Bueno, todo esto funciona muy bien. Pero al renderizar, todos los elementos de la lista están uno al lado del otro y no uno debajo del otro como yo quería.
como podria solucionar esto?
con esta linea
const cardsList = [list]está creando una nueva matriz llena de la matriz objetivo para que su estructura de datos se vea así
[ // first array [ // second array 'Reset de Senha', 'Consulta de Ponto', 'Criação de Chamados', 'Consulta de Chamados', 'Dúvidas Frequentes' ] ] con su función cardsList.map , solo está iterando sobre la primera matriz que incluye solo un elemento (la segunda matriz). Así que simplemente use list.map sin la redeclaración adicional de cardsList para iterar sobre los enlaces.
EDITAR:
Obtiene el error de que la list no puede acceder a .map porque no lo pasó como accesorio en su segundo componente CardBase . Cuando lo convierte en una list?.map((card, index) => ...)) debería funcionar sin el error (hágalo opcional con un ? después de su list ).
list es una matriz, solo use:
const cardsList = list; // not [list]** Usa este código
export default function CardBase({ list, title }) { const cardsList = list; //not [list] as list is already an array function cardsMap() { return ( <> {cardsList.length && 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> ); }