Renderização de Lista

Para renderizar elementos de uma lista no React você pode utilizar os métodos de iteração do JavaScript, como for e map, dessa maneira percorrendo cada elemento de uma lista e renderizando o que for desejado.

Live Editor

function Partners() {
  const companies = [
    {
      name: 'Apple',
      products: ['iPhone', 'iPad', 'Macbook', 'Apple Watch'],
      url: 'https://www.apple.com',
    },
    {
      name: 'Google',
      products: ['Android', 'Google Chrome', 'Google Maps'],
      url: 'https://www.google.com',
    },
    {
      name: 'Meta',
      products: ['Facebook', 'Instagram', 'WhatsApp'],
      url: 'https://www.meta.com/',
    },
  ]

  const renderCompany = (company) => {
    return (
      <div key={company.name}>
        <h3>{company.name}</h3>
        <strong>Produtos</strong>
        <ul>
          {company.products.map((product) => (
            <li key={product}>{product}</li>
          ))}
        </ul>
        <a href={company.url} target="_blank" rel="noreferrer">
          Visitar site
        </a>
      </div>
    )
  }

  return (
    <div>
      {companies.map(renderCompany)}
    </div>
  )
}

Result

Loading...

Tem ponto bastante importante na renderização dos elementos que é a inserção de uma propriedade key em cada elemento da lista. Essa propriedade é utilizada pelo React para identificar cada elemento e assim fazer a renderização de forma mais eficiente. É importante que seja único para cada item quando utilizado no mesmo nível.

const values = ['a', 'b', 'c']

const List = () => {
  return (
    <ul>
      {values.map((value) => (
        <li key={value}>{value}</li>
      ))}
    </ul>
  )
}

Isso evita problemas de performance e também de renderização, como por exemplo, quando um elemento é removido da lista, o React consegue identificar e remover apenas aquele elemento, sem precisar renderizar todos novamente.