Sobes.tech
Junior — Middle+

Creating an autocomplete Input component in React

livecode

Task condition

The task provides an API that returns a list of characters from the "Star Wars" universe. You are required to write a React component InputAutocomplete that suggests character names as the user types the first letters. When typing part of a string, the component should display a list of suitable suggestions obtained through the specified API.

API Description:

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
}

Project initial code:

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!';
}

Your task is to implement the autocomplete component using the getPeople function to fetch data and integrate it into the application.