Input Mask

App.js

import React, {useState} from 'react';
import Input from "./Input";
const cities = require("./cities.json");
function App() {
   const [hint, setHint] = useState("");

    const handleChange = (e) => {
        for (const city of cities) {
            if (city.startsWith(e.target.value) && e.target.value.length) {
                return city;
            }
        }
        return "";
   }
   return <div>
      <Input handleChange={(e) => setHint(handleChange(e))} hint={hint}/>
   </div>
}

export default App;