Назад к задачамПолучайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Junior — Senior
11
Таблица пользователей с фильтром по городу
Условие задачи
Необходимо реализовать 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 | Имя | Город | |
|---|---|---|---|
| 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 |