---
# System prepended metadata

title: 問題

---

# 問題

- 下記のような検索フォームがあります
- `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` は適当に補って構いません

```jsx
import axios from 'axios';

function Response(props) {
    return (
        <div>
            <h1>{props.title}</h1>
        </div>
    )
}

class CodeTest extends Ract.Component {
    constructor(props) {
        super(props);
        this.state = {
            q: '',
            response: [],
        };
    }
    
    getResponse() {
        axios.get('https://api.example.com/search', {
            params: {
                q: this.state.q,
            }
        }, res => {
            this.state.response = res;
        });
    }
    
    render() {
        return (
            <div>
                <form>
                    <input
                        type="text"
                        value={this.state.q}
                        onChange={
                            (value) => {this.state.q = value; }
                        }
                    >
                    </input>
                    <button onClick={this.getResponse()}></button>
                </form>
                {
                    this.state.response.map(res => {
                        return (
                            <Response
                                key={res.id}
                                title={res.title}
                            ></Response>
                    });
                }
            </div>
        );
    }
}

```
