`:
```js
import { Fragment } from 'react';
@@ -381,46 +384,46 @@ const listItems = people.map(person =>
);
```
-Fragments disappear from the DOM, so this will produce a flat list of ``, `
`, `
`, `
`, and so on.
+Fragmenty znikają z DOM, więc powyższy kod wygeneruje płaską listę `
`, `
`, `
`, `
` i tak dalej.
-### Where to get your `key` {/*where-to-get-your-key*/}
+### Skąd wziąć `key` {/*where-to-get-your-key*/}
-Different sources of data provide different sources of keys:
+Różne źródła danych, dostarczają różne źródła kluczy:
-* **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
-* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
+* **Dane z bazy danych:** Jeśli Twoje dane pochodzą z bazy danych, możezz użyć kluczy/identyfikatorów podchodzących z tabel baz danych, które z natury są unikatowe.
+* **Dane generowane lokalnie:** Jeśli Twoje dane są generowane i przechowywane lokalnie (np. notatki w aplikacji notatnika), możesz użyć inkrementowanego licznika, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) lub modułu jak [`uuid`](https://www.npmjs.com/package/uuid) podczas tworzenia elementów.
-### Rules of keys {/*rules-of-keys*/}
+### Reguły kluczy {/*rules-of-keys*/}
-* **Keys must be unique among siblings.** However, it’s okay to use the same keys for JSX nodes in _different_ arrays.
-* **Keys must not change** or that defeats their purpose! Don't generate them while rendering.
+* **Klucze muszą być unikalne wśród rodzeństwa.** Można jednak używać tych samych kluczy dla węzłów JSX w _różnych_ tablicach.
+* **Klucze nie mogą się zmieniać.** Inaczej to narusza ich cel! Nie generuj ich podczas renderowania.
-### Why does React need keys? {/*why-does-react-need-keys*/}
+### Dlaczego React potrzebuje kluczy? {/*why-does-react-need-keys*/}
-Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.
+Wyobraź sobie, że pliki na twoim pulpicie nie mają nazw. Zamiast tego odwołujesz się do nich według ich kolejności — pierwszy plik, drugi plik i tak dalej. Możesz się do tego przyzwyczaić, ale gdy usuniesz plik, stanie się to zagmatwane. Drugi plik stałby się pierwszym plikiem, trzeci plik byłby drugim plikiem itd.
-File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the _position_ changes due to reordering, the `key` lets React identify the item throughout its lifetime.
+Nazwy plików w folderze oraz klucze JSX w tablicy służą podobnemu celowi. Pozwalają nam jednoznacznie zidentyfikować element między rodzeństwem. Dobrze dobrany klucz dostarcza więcej informacji niż pozycja w tablicy. Nawet jeśli _pozycja_ zmieni się z powodu zmiany kolejności, `key` pozwala Reactowi identyfikować element przez cały okres jego istnienia.
-You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a `key` at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
+Możesz pokusić się o użycie indeksu elementu w tablicy jako klucza. Właściwie to właśnie tego użyje React, jeśli w ogóle nie podasz `key`. Jednak kolejność renderowania elementów zmieni się w czasie, jeśli element zostanie wstawiony, usunięty lub jeśli tablica zostanie zmieniona. Indeks jako klucz często prowadzi do subtelnych i mylących błędów.
-Similarly, do not generate keys on the fly, e.g. with `key={Math.random()}`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
+Podobnie nie generuj kluczy w locie, np. za pomocą `key={Math.random()}`. Spowoduje to, że klucze nigdy nie będą pasować między renderowaniami, co doprowadzi do odtworzenia wszystkich komponentów i DOM za każdym razem. Jest to nie tylko powolne, ale także powoduje utratę danych wejściowych użytkownika w elementach listy. Zamiast tego użyj stabilnego identyfikatora opartego na danych.
-Note that your components won't receive `key` as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: ``.
+Zauważ, że twoje komponenty nie otrzymają `key` jako property komponentu. Jest on używany tylko jako wskazówka przez sam React. Jeśli twój komponent potrzebuje identyfikatora, musisz przekazać go jako osobną właściwość. Przykład: ``.
-On this page you learned:
+Na tej stronie dowiedziałeś się:
-* How to move data out of components and into data structures like arrays and objects.
-* How to generate sets of similar components with JavaScript's `map()`.
-* How to create arrays of filtered items with JavaScript's `filter()`.
-* Why and how to set `key` on each component in a collection so React can keep track of each of them even if their position or data changes.
+* Jak przenieść dane do struktur danych, takich jak tablice i obiekty.
+* Jak generować zestawy podobnych sobie komponentów za pomocą funkcji `map()` JavaScriptu.
+* Jak tworzyć tablice przefiltrowanych elementów za pomocą funkcji `filter()` w JavaScript.
+* Dlaczego i jak ustawić `key` na każdym komponencie w kolekcji, aby React mógł śledzić każdy z nich, nawet jeśli zmieni się ich pozycja lub dane.
@@ -428,11 +431,11 @@ On this page you learned:
-### Splitting a list in two {/*splitting-a-list-in-two*/}
+### Dzielenie listy na dwie części {/*splitting-a-list-in-two*/}
-This example shows a list of all people.
+Ten przykład ukazuje listę wszystkich ludzi.
-Change it to show two separate lists one after another: **Chemists** and **Everyone Else**. Like previously, you can determine whether a person is a chemist by checking if `person.profession === 'chemist'`.
+Zmieńmy go, aby pokazać dwie osobne listy, jedna pod drugą: **Chemicy** oraz **Wszyscy inni**. Podobnie jak poprzednio, możesz określić, która osoba jest chemikiem, sprawdzając czy `person.profession === 'chemist'`.
@@ -454,6 +457,7 @@ export default function List() {
);
+
return (
Scientists
@@ -523,7 +527,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-You could use `filter()` twice, creating two separate arrays, and then `map` over both of them:
+Mógłbyś użyć `filter()` dwukrotnie, tworząc dwie oddzielne tablice, a następnie `mapować` je obie:
@@ -535,9 +539,11 @@ export default function List() {
const chemists = people.filter(person =>
person.profession === 'chemist'
);
+
const everyoneElse = people.filter(person =>
person.profession !== 'chemist'
);
+
return (
Scientists
@@ -636,9 +642,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-In this solution, the `map` calls are placed directly inline into the parent `` elements, but you could introduce variables for them if you find that more readable.
+W tym rozwiązaniu wywołania `map` są umieszczane bezpośrednio w linii nadrzędnych elementów ``, ale możesz wprowadzić dla nich zmienne, jeśli uznasz to za bardziej czytelne.
-There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a `` component:
+Nadal występuje duplikacja między renderowanymi listami. Możesz pójść dalej i wyodrębnić powtarzające się części do komponentu ``:
@@ -750,9 +756,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-A very attentive reader might notice that with two `filter` calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the `filter` calls with a loop that manually constructs the arrays and checks each person once.
+Bardzo uważna osoba może zauważyć, że przy dwóch wywołaniach `filter` sprawdzamy zawód każdej osoby dwa razy. Sprawdzenie właściwości jest bardzo szybkie, więc w tym przykładzie jest w porządku. Jeśli twoja logika byłaby droższa, możesz zastąpić wywołania `filter` pętlą, która ręcznie konstruuje tablice i sprawdza każdą osobę tylko jeden raz.
-In fact, if `people` never change, you could move this code out of your component. From React's perspective, all that matters if that you give it an array of JSX nodes in the end. It doesn't care how you produce that array:
+W rzeczywistości, jeśli `people` nigdy się nie zmienią, mógłbyś przenieść ten kod na zewnątrz swojego komponentu. Z perspektywy Reacta, jedyne, co ma znaczenie, to końcowa tablica węzłów JSX. Nie obchodzi go, jak utworzysz tę tablicę:
@@ -870,13 +876,13 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-### Nested lists in one component {/*nested-lists-in-one-component*/}
+### Listy zagnieżdżone w jednym komponencie {/*nested-lists-in-one-component*/}
-Make a list of recipes from this array! For each recipe in the array, display its title as an `` and list its ingredients in a ``.
+Zrób listę przepisów z tej tablicy! Dla każdego przepisu w tablicy wyświetl jego tytuł jako `` i wymień jego składniki za pomocą ``.
-This will require nesting two different `map` calls.
+Będzie to wymagało zagnieżdżenia dwóch różnych wywołań `map`.
@@ -914,7 +920,7 @@ export const recipes = [{
-Here is one way you could go about it:
+Oto jeden ze sposobów, w jaki możesz to zrobić:
@@ -960,13 +966,13 @@ export const recipes = [{
-Each of the `recipes` already includes an `id` field, so that's what the outer loop uses for its `key`. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a `key`. Alternatively, you could change the data structure to add IDs, or use index as a `key` (with the caveat that you can't safely reorder ingredients).
+Każdy element z `recipes` (przepisów) zawiera już pole `id`, więc tego używa zewnętrzna pętla dla swojego klucza `key`. Nie ma identyfikatora, którego można by użyć do zapętlenia składników. Rozsądne jest jednak założenie, że ten sam składnik nie zostanie wymieniony dwa razy w ramach tego samego przepisu, więc jego nazwa może służyć jako `key`. Alternatywnie możesz zmienić strukturę danych, aby dodać identyfikatory, lub użyć indeksu jako `key` (z zastrzeżeniem, że nie możesz bezpiecznie zmienić kolejności składników).
-### Extracting a list item component {/*extracting-a-list-item-component*/}
+### Wyodrębnianie elementu listy {/*extracting-a-list-item-component*/}
-This `RecipeList` component contains two nested `map` calls. To simplify it, extract a `Recipe` component from it which will accept `id`, `name`, and `ingredients` props. Where do you place the outer `key` and why?
+Ten komponent `RecipeList` zawiera dwa zagnieżdżone wywołania `map`. Aby to uprościć, wyodrębnij z niego komponent `Recipe`, który akceptuje właściwości `id`, `name` i `ingredients`. Gdzie umieścisz zewnętrzny `key` i dlaczego?
@@ -1014,7 +1020,7 @@ export const recipes = [{
-You can copy-paste the JSX from the outer `map` into a new `Recipe` component and return that JSX. Then you can change `recipe.name` to `name`, `recipe.id` to `id`, and so on, and pass them as props to the `Recipe`:
+Możesz skopiować i wkleić JSX z zewnętrznego wykonania `map` do nowego komponentu `Recipe` i zwrócić ten JSX. Następnie możesz zmienić `recipe.name` na `name`, `recipe.id` to `id` itd. i przekazać je jako właściwości (props) do `Recipe`:
@@ -1242,7 +1248,7 @@ hr {
-Remember, fragments (often written as `<> >`) let you group JSX nodes without adding extra ``s!
+Pamiętaj, fragmenty (zazwyczaj pisane jako `<> >`) pozwalają Ci grupować węzły JSX bez pisania dodatkowych `
`ów.