Logo

Wyświetlanie list

git checkout 11-list -f

Dodajmy tablicę użytkowników. Niech to będzie tablica 3 obiektów, które mają klucze "name" i "surname" będące stringami.

const users = [{ name: 'Józef', surname: 'Piecyk' }, { name: 'Emilia', surname: 'Piecyk' }, { name: 'Masala', surname: 'Piecyk' }];

By wyświetlić kilka elementów z tablicy możemy użyć metody Array.map(). Przekazujemy jej funkcję, która dla każdego elementu tablicy coś nam zwróci. Możemy na przykład dla każdego elementu tablicy zwrócić akapit(<p></p>), w którym będzie imie osoby. Funkcje map musimy wywołać w wąsatych nawiasach, podobnie jak gdy wyświetlamy dane ze zmiennych.

  render() {
    return (
      <div className="App">
      // reszta
        {users.map((user) => {
          return <p>{user.name}</p>;
        })}
      </div>
    );
  }