# React Challenge: City Population

This challenge has the goal of providing a simple application that allows you to autocomplete a city name using an API, and showing the selected city's population on the screen.

- Create a new project with `create-react-app`, `ViteJS React TypeScript`, `create-next-app` or something similar)
- Check out the Teleport API: https://developers.teleport.org/api/reference/
- Create a new component `<Autocomplete onCityClick={ city => {} } />`
- The user's input should be autocompleted against the Teleport API
- The component should render a list of suggestions (e.g. when entering just the letter "a", a few different cities matching that letter should be rendered)
- The user can click on a city suggestion to select it. This should trigger `onCityClick`
- Write some logic in the parent component to fetch the selected city's population
- Hint: use the city's `_links` field to fetch more data, or use the city's id (which looks like this: `geonameid:2306104`)
- Render the city name and population
- Use the autocomplete component a second time to fetch another city's population
- Calculate the difference in population between the two

### Keep it simple!
- No fancy UI needed. You can do layouting with `style={{display: "flex"}}` directly inline, for example.
- Please try to use native capabilities (e.g. fetch instead of axios). You don't need any additional libraries.