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.