Czym jest metoda map() w JavaScript?
map() to metoda tablicy w JavaScript, która tworzy nową tablicę na podstawie elementów tablicy źródłowej. Dla każdego elementu wykonuje podaną funkcję i zwraca wynik.
Przykład:
const tags = ['tag1', 'tag2', 'tag3'];
const wynik = tags.map(tag => tag.toUpperCase());
Wartość wynik będzie równa:
['TAG1', 'TAG2', 'TAG3']
map() w React
W React metoda map() jest często używana do renderowania list elementów HTML lub komponentów:
{tags.map(tag => <p key={tag}>{tag}</p>)}
Ten kod oznacza: dla każdego elementu tablicy tags utwórz osobny paragraf <p>.
Dla tablicy:
['tag1', 'tag2', 'tag3']
zostaną wygenerowane trzy elementy:
<p>tag1</p>
<p>tag2</p>
<p>tag3</p>
Rola parametru key
W React atrybut key pomaga frameworkowi rozpoznawać elementy listy podczas aktualizacji widoku. Nie jest on wyświetlany w przeglądarce jako tekst.
Najważniejsze
map() nie zmienia automatycznie oryginalnej tablicy. Zwraca nową tablicę wyników, np. tablicę elementów JSX w aplikacji React.