O método map é uma funcionalidade essencial dos arrays no JavaScript. Ele percorre cada item de um array, aplicando uma função especificada a cada elemento. Essa função pode modificar o item atual e/ou retornar um novo valor, resultando em um novo array com os valores modificados pela função aplicada.
No React, frequentemente lidamos com listas de dados, como arrays de produtos, nomes ou outras informações que desejamos exibir na tela 📋. O método map se mostra perfeito para essas situações 🌟, permitindo a renderização de cada item de dados como um componente JSX. Isso nos permite apresentar informações complexas de forma eficiente e concisa ✨, sem a necessidade de longos blocos de código.
Quando pensamos na forma como grandes plataformas de e-commerce, como MercadoLivre, Amazon e Shopee, exibem milhares de produtos, surge a questão: como esses sites conseguem listar tantos produtos de maneira eficiente 🛍️? Será que cada produto e imagem é adicionado à página manualmente, um por um? Essa abordagem não só seria impraticável, mas também extremamente ineficiente 🚫.
A solução adotada por esses sites envolve armazenar as informações dos produtos em estruturas de dados como arrays. Cada elemento desse array contém os detalhes de um produto, incluindo nome, preço, descrição e um link para a imagem 🖼️. Para exibir esses produtos na interface do usuário, esses sites utilizam um método JavaScript chamado map.
No contexto do desenvolvimento web moderno, especialmente em aplicações React, o método map desempenha um papel crucial nesta técnica 🚀. O map é usado para mapear sobre o array de produtos, transformando cada elemento do array (ou seja, cada produto) em um componente visual na página 📦.
Ao ser aplicado a um array, o map executa uma função anônima(callback) em cada um dos elementos do array original, retornando um novo array que contém os resultados dessa função para cada elemento. A sintaxe básica do método map em React é a seguinte:
const numeros = [1, 2, 3, 4, 5];
const numerosDobrados = numeros.map(numero => numero * 2);
console.log(numerosDobrados); // Saída: [2, 4, 6, 8, 10]Neste exemplo, temos um array numeros contendo números de 1 a 5. Utilizamos o map que irá guardar valores em um novo array chamado numerosDobrados, onde cada elemento é o dobro do correspondente no array original. A função de callback passada para o map simplesmente multiplica cada numero por 2, resultando em um novo array de números dobrados.
const Tarefas = [
"Aprender React",
"Estudar styled-components",
"Construir um app",
];
function ListaDeTarefas() {
return (
<ul>
{Tarefas.map((item, id) => (
<li key={id}>{item}</li>
))}
</ul>
);
}Neste exemplo acima, criamos o componente ListaDeTarefas, onde utilizamos o método map no array Tarefas. Por meio de uma função anônima (callback) com dois parâmetros (item e id) esses parâmetros estão sendo chamados dentro de nossa <li></li>, o mapretornará cada tarefa (string) dentro das tags<li> do nosso componente JSX.
Propriedade key: No React, ao renderizar uma lista, é importante atribuir uma propriedade key. Isso permite que o React gerencie eficientemente as alterações na lista, identificando quais itens foram modificados, adicionados ou removidos, otimizando o processo de renderização, a key é como se fosse um CPF para cada uma das informações de nossa lista, assim conseguimos diferenciar e modificar cada uma de nossas informações que o map renderiza, nesse caso key={id} o id irá dar um "CPF" para chave(key) que estão em nossas li´s.
Este exemplo demonstra como renderizar uma lista de compras utilizando React. Utilizamos o hook useState para criar um array inicial que armazena os itens da lista. Através do método map, iteramos sobre cada item do array items para renderizá-los em elementos <li> dentro de uma lista <ul>. Cada item da lista recebe uma key única, baseada no índice do array, para otimizar a renderização pelo React.
import React, { useState } from "react";
function ShoppingList() {
const [items, setItens] = useState(["Maçã", "Pão", "Leite"]);
return (
<div>
<h2>Lista de Compras</h2>
<ul>
{items.map((item, id) => (
<li key={id}>{item}</li>
))}
</ul>
</div>
);
}Neste exercício, mostramos como usar useState para armazenar uma lista simples de nomes e map para renderizá-los em uma lista. Assim como no exemplo anterior, cada nome é transformado em um elemento <li></li> com uma key baseada no índice do array, garantindo uma renderização eficiente e sem erros de chave duplicada.
import React, { useState } from "react";
function NameList() {
const [names, setNames] = useState(["Ana", "Bruno", "Carlos"]);
return (
<div>
<h2>Lista de Nomes</h2>
<ul>
{names.map((item, id) => (
<li key={id}>{item}</li>
))}
</ul>
</div>
);
}Este exemplo ilustra a renderização de uma lista de tarefas. Usando o hook useState, definimos um array inicial com várias tarefas. Com o map, transformamos cada tarefa do array tasks em um elemento <li></li> para ser exibido na interface do usuário. A atribuição de uma key baseada no índice ajuda o React a identificar e gerenciar cada elemento da lista de forma mais eficaz.
import React, { useState } from "react";
function TaskList() {
const [tasks, setTasks] = useState([
"Estudar React",
"Fazer exercícios",
"Ler documentação",
]);
return (
<div>
<h2>Lista de Tarefas</h2>
<ul>
{tasks.map((item, id) => (
<li key={id}>{item}</li>
))}
</ul>
</div>
);
}O método map é uma ferramenta extremamente poderosa tanto no JavaScript puro quanto no React. No contexto do React, ele é essencial para a renderização eficiente e declarativa de listas de dados. Lembre-se de fornecer uma propriedade key única para cada item renderizado, facilitando a otimização das atualizações do DOM por parte do React.
🚀 Bons códigos e vamos para os exercícios! 📚👨💻