Назад к задачам
Junior — Senior
11

Таблица пользователей с фильтром по городу

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Необходимо реализовать React‑компонент UserTable2, который выводит список пользователей в виде таблицы. Требования:

  • Получить массив пользователей с API https://jsonplaceholder.typicode.com/users.
  • Таблица должна содержать столбцы: ID, Имя, Email, Город.
  • Над таблицей разместить заголовок Список пользователей.
  • Добавить выпадающий список «Фильтр по городу». При выборе конкретного города в таблице отображаются только пользователи из этого города, а при выборе пункта Все – весь список.
const apiUrl = "https://jsonplaceholder.typicode.com/users";

const UserTable2 = () => {
  return <div></div>;
};

export default UserTable2;

Пример ожидаемого вида:

Список пользователей

[ Фильтр по городу: Все ▼ ]

ID Имя Email Город
1 Leanne Graham Sincere@april.biz Gwenborough
2 Ervin Howell Shanna@melissa.tv Wisokyburgh
3 Clementine Bauch Nathan@yesenia.net McKenziehaven
4 Patricia Lebsack Julianne.OConner@kory.org South Elvis
5 Chelsey Dietrich Lucio_Hettinger@annie.ca Roscoeview
6 Mrs. Dennis Schulist Karley_Dach@jasper.info South Christy
7 Kurtis Weissnat Telly.Hoeger@billy.biz Howemouth
8 Nicholas Runolfsdottir V Sherwood@rosamond.me Aliyaview
9 Glenna Reichert Chaim_McDermott@dana.io Bartholomebury
10 Clementina DuBuque Rey.Padberg@karina.biz Lebsackbury