Jak tworzy się listy w Reakcie?

React

readTime

3 min

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:

index.js

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

index.js

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

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:

index.js

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

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:

index.js

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

Renderowanie listy komponentów w Reakcie

index.js

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

authorImg

Witek Pruchnicki

Z pasją dzielę się wiedzą o programowaniu i nie tylko na różne sposoby

ytLogolinkedInLogotiktokLogo

Spis treści

React

Więcej