title: How to take an array by props and render?
body: <p>I'm building some info cards through React, and I'm passing the info through props to a base component.</p>
  <pre><code>export default function Home() {
      return (
      &lt;Box className={styles.container}&gt;
              &lt;div className={styles.helpCards}&gt;
                  &lt;CardBase title={WhatICanDo.title} list={WhatICanDo.links}/&gt;
                  &lt;CardBase title={LearnToTalkToMe.title} /&gt;
                  &lt;CardBase title={QuickLinks.title} list={QuickLinks.links}/&gt;
              &lt;/div&gt;
      &lt;/Box&gt;
  </code></pre>
  <p>I have a separate file where I store this information. The card is mainly given a title and a list of useful links.</p>
  <pre><code>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'
      ]
  }
  </code></pre>
  <p>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 (&lt; li &gt;).</p>
  <pre><code>export default function CardBase({ list, title }) {
      const cardsList = [list];
  
      function cardsMap() {
          return (
              &lt;&gt;
                  {cardsList.map((card, index) =&gt; 
                      &lt;li key={index}&gt;{card}&lt;/li&gt;
                  )}
              &lt;/&gt; 
          )
      }
  
      return (
          &lt;Card className=''&gt;
              &lt;CardContent&gt;
                  &lt;Typography className='' color='' gutterBottom&gt;
                      {title}
                  &lt;/Typography&gt;
                  
                  &lt;Typography className='' variant='' component=''&gt;
                      {cardsMap()}
                  &lt;/Typography&gt;
              &lt;/CardContent&gt;
          &lt;/Card&gt;
      );
  }
  </code></pre>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/tn6be.png" rel="nofollow noreferrer">Image</a></p>
  <p>how could I solve this?</p>