Назад к задачам
Junior — Middle+
11

Создание автодополняющего Input‑компонента в React

Компании, где спрашивали:

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

В задании предоставлен API, возвращающий перечень персонажей из вселенной «Звёздных войн». Требуется написать React‑компонент InputAutocomplete, который будет предлагать варианты имен персонажей по мере ввода пользователем первых букв. При вводе часть строки, компонент должен показывать список подходящих подсказок, полученных через указанный API.

Описание API:

GET https://swapi.dev/api/people?search=skywalker&page=1
{
  next: string | null         // url
  results: Array({ name: string, url: string })  // max length 10, unique url
}

Исходный код проекта:

import React from 'react';

function getPeople(search, page = 1, options = {}) {
  return fetch(
    `https://swapi.dev/api/people?search=${search}&page=${page}`,
    options
  )
    .then((res) => res.json())
    .then((data) => data);
}

export default function App() {
  return 'Hello there!';
}

Ваша задача – реализовать компонент автодополнения, используя функцию getPeople для получения данных, и интегрировать его в приложение.