# 問題

- 下記のような検索フォームがあります
- `input` に検索ワードを入力して `button` を押すと API にリクエストを送ります
- 送信の形式は `https://api.example.com/search?q=〇〇` とします
- サーバーからは下記のような JSON が返ってくるのでその内容をdivに展開します
- `{ id: number, title: string }[]` とします
- クエリが空の時は何も返ってきません
- サーバーはとても貧弱です、極力サーバーに優しくなるよう処理を書いてください
- CSSに関しては一切考慮しなくてよいです

+-----------+  +--------+
| input     |  | button |
+-----------+  +--------+
+-----------------------+
| div                   |
+-----------------------+

# 備考

- 表示には何のライブラリを使っても良いものとします（ jQuery、React、Vue、Angular、生 JS ）。
- Ajax リクエストにも何を使っても良いものとします（ axios、$.ajax、fetch、生 XHR ）
- メソッド名は多少間違っててもいいですし、設問者に聞いて教えてもらって構いません。
- `input` や `button` の `class` や `id` は適当に補って構いません

16:25~
---

type Data = {
    id: number;
    title: string;
}[]


const Form = () => {
    const [data, set] = useState<Data>(null);
    const ref = useRef('');
    const [accessNow, setAccess] = useState(false);
    const [prevQuery, setPrevQuery] = useState("");
    
    const async onClick = () => {
        if (!!AccessNow || prevQuery === ref.current) return;
        setAccess(true);
        const res: AxiosResponse<> = await axios
                        .post(`https://api.example.com/search?q=${ref.current}`)
                        .catch(err => console.error(error))
        set(res.data());
        setPrevQuery(ref.current);
        setAccess(false);
    }
    

    return (
        <>
            <form>
                <input type="text" ref={ref} />
                <button onClick={onClick} >
            </form>
            <div>
                <ul>
                {data.map({id, title} => {
                    <li key={id}>
                        <div>{id}</div>
                        <div>{title}</div>
                    </li>
                })}
                </ul>
            </div>
        </>
    )
}