# 問題

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

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

# 備考

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

------

const FormArea = () => {
  const [value, setValue] = useState('');
  const [list, setList] = useState([]);
  const [fetching, setFetching] = useState(false);
  
  const handleChange = (e) => {
    setValue(e.target.value);
  }
  
  const handleClick = useCallback(async () => {
    setFetching(true);
    try {
      const response = await axios.get(
        'https://api.example.com/search',
        {
          params: {
            q: value
          }
        }
      );
      setList(response.data);
    } catch (e) {
      throw e;
    } finally {
      setFetching(false);
    }
  }, [value, fetching]);

  return (
    <div>
      <form>
        <input value={value} onChange={handleChange} />
        <button disabled={fetching} onClick={handleClick} />
      </form>
      <div>
        {list.map((item) => <p key={item.id}>{item.title}</p>)}
      </div>
    </div>
  );
}