Jak tworzy się listy w Reakcie?

W bibliotece React listy renderuje się za pomocą pewnego rodzaju pętli.

Najczęściej spotykaną i preferowaną jest metoda map().

Funkcja .map() jest jedną z najczęściej używanych metod programowania funkcyjnego. Jest to metoda tablicowa czyli wykonuje się ją na tablicy i transformuje ona po kolei każdy z elementów tablicy a następnie zwraca nową tablicę ze zmodyfikowaną zawartością.

Listy są bardzo przydatne bo tak naprawdę w każdym miejscu gdzie chcemy wyświetlić jakieś dane interfejsu użytkownika, menu lub cokolwiek to z łatwością możemy skorzystać z listy elementów.

Do iterowania po tablicy i zwrócenia nowej tablicy z nowymi elementami możemy użyć funkcji map(),jak pokazano w poniższym kodzie:

<script type="text/javascript">
    const numberArray = [1,2,3,4,5];
    const updatedNumsExample = numberArray.map((number)=>{
        return (number + 2);
    });
    console.log(updatedNumsExample);
</script>

Wynik: [3, 4, 5, 6, 7]

Po co nam listy w bibliotece React?

Listy są kluczowymi funkcjami aplikacji. Lista zadań, lista zdjęć, lista przedmiotów do kupienia w koszyku itp. To liczne przypadki użycia list z życia codziennego.

Listy są przydatne tak naprawdę na każdej witrynie. Weźmy choćby pod uwagę menu na stronie internetowej lub jakikolwiek zbiór elementów o podobnej charakterystyce.

W interfejsach użytkownika jest wiele elementów które się powtarzają, tak naprawdę tylko dane się zmieniają a komponenty w swojej strukturze wyglądają tak samo. Dlatego warto skorzystać z metody map i na podstawie danych z tablicy utworzyć nowe komponenty.

Czym są klucze gdy tworzymy listy w Reakcie?

Każdy element listy powinien mieć unikalny klucz. „Klucz” to specjalny atrybut, wymagany podczas tworzenia list elementów w React. Klucze są ważne dla poprawy wydajności aplikacji React. Klucze pomagają również zidentyfikować, które elementy uległy zmianie (dodano/usunięto/zaktualizowano).

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

Najlepszym sposobem wyboru klucza jest użycie unikatowego ciągu znaków, który jednoznacznie identyfikuje element listy spośród innych elementów tablicy. Jako kluczy często będziesz używać identyfikatorów (ang. IDs) ze swoich danych:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

Jeśli w danych, którymi dysponujesz nie ma identyfikatorów dla wyświetlanych elementów, to możesz użyć indeksu elementu tablicy do określenia klucza, aczkolwiek nie jest to dobra praktyka bo elementy mogą ulec zmianie w tablicy i wszystko się posypie:

const todoItems = todos.map((todo, index) =>
  // Rób to tylko w przypadku, gdy elementy nie mają identyfikatorów
  <li key={index}>
    {todo.text}
  </li>
);

Renderowanie listy komponentów w Reakcie

const list = [
  {
    id: 'a',
    firstname: 'Robin',
    lastname: 'Wieruch',
    year: 1988,
  },
  {
    id: 'b',
    firstname: 'Dave',
    lastname: 'Davidds',
    year: 1990,
  },
];
 
const List = ({ list }) => (
  <ul>
    {list.map(item => (
      <ListItem key={item.id} item={item} />
    ))}
  </ul>
);