diff --git a/beta/src/pages/learn/rendering-lists.md b/beta/src/pages/learn/rendering-lists.md index f1710fe60..782773f01 100644 --- a/beta/src/pages/learn/rendering-lists.md +++ b/beta/src/pages/learn/rendering-lists.md @@ -1,24 +1,24 @@ --- -title: Rendering Lists +title: Renderowanie list --- -You will often want to display multiple similar components from a collection of data. You can use the [JavaScript array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#) to manipulate an array of data. On this page, you'll use [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) with React to filter and transform your array of data into an array of components. +Często zdarzy się tak, że będziesz chciał/a wyświetlić podobne komponenty na podstawie kolekcji danych. W tym celu, możesz użyć [JavaScript array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#), aby manipulować tablicą danych. Na tej stronie będziesz używać metod: [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) oraz [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) wspólnie z React, aby filtrować i transformować swoją tablicę danych do tablicy komponentów. -* How to render components from an array using JavaScript's `map()` -* How to render only specific components using JavaScript's `filter()` -* When and why to use React keys +* Jak renderować komponenty na podstawie tablicy używając metody `Array.map()` +* Jak renderować tylko określone komponenty używając metody `Array.filter()` +* Kiedy i dlaczego używać mechanizmu kluczy w React -## Rendering data from arrays {/*rendering-data-from-arrays*/} +## Renderowanie danych na podstawie tablic {/*rendering-data-from-arrays*/} -Say that you have a list of content. +Powiedzmy, że masz listę treści. ```js ``` -The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them. +Jedyna różnica wśród tych pozycji na liście to ich treść, ich dane. Często będziesz potrzebował/a, aby pokazać kilka instancji tego samego komponentu, używając innych danych podczas budowania interfejsów: począwszy od list komentarzy, aż do galerii obrazków profili. W tych sytuacjach, możesz przechowywać te dane jako obiekty lub/i tablice JavaScript i używać metod takich jak: [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) oraz [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), aby renderować z nich listy komponentów. -Here’s a short example of how to generate a list of items from an array: +Poniżej przedstawiony jest krótki przykład, w jaki sposób generować listę na podstawie tablicy: -1. **Move** the data into an array: +1. **Przenieś** dane do tablicy: ```js const people = [ @@ -46,19 +46,19 @@ const people = [ ]; ``` -2. **Map** the `people` members into a new array of JSX nodes, `listItems`: +2. **Zmapuj** elementy z tablicy `people` do nowej tablicy elementów JSX, `listItems`: ```js const listItems = people.map(person =>
  • {person}
  • ); ``` -3. **Return** `listItems` from your component wrapped in a `