How to take an array by props and render?

Question

I'm building some info cards through React, and I'm passing the info 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>

I have a separate file where I store this information. The card is mainly given a title and a list of useful links.

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'
    ]
}

Inside the file that captures the information and assembles all the base of these cards, I need to make a map of the list of received links, so that they are all in the form of items (< 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>
    );
}

Well, this all works very well. But when rendering, all the items in the list are next to each other and not one below the other as I wanted.

Image

how could I solve this?

Answer 1

** Use this code

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>
);
}

Answer 2

With this line

const cardsList = [list]

you are creating a new array filled with the goal array so your data structure looks like this

[ // first array
 [ // second array
   'Reset de Senha',
   'Consulta de Ponto',
   'Criação de Chamados',
   'Consulta de Chamados',
   'Dúvidas Frequentes'
  ]
]

with your cardsList.map function you are just iterating over the first array which includes only one element (the second array). So just use list.map without the additional redeclaration of cardsList to iterate over the links.

EDIT:

You get the Error that list can't access .map because you didn't pass it as a prop in your second CardBase component. When you make it an optional like list?.map((card, index) => ...)) it should work without the error (make it optional with an ? after your list).

Answer 3

list is an array, just use :

const cardsList = list; // not [list]