pokemonのデータ取ってくるの返す奴。 reactっぽく書きなおしてみた！

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){ //わかった！！！
        super(props);
        this.state = {"name": "ポケモンの名前", //初期値
            "classification": null,
            "type": "ポケモンのタイプ",
            "image": "https://pics.prcm.jp/f7e8ba48d36a5/59605483/png/59605483.png",
            "comment": "ポケモンについての説明",
        };
    }

    getPokemon(){
        let num = document.getElementById("input").value;
        fetch(`http://pokemonapi.net/pokemon/${num}.json`)
            .then((response) => response.json())
            .then((json) => { //とってきたjsonのデータをstateに入れる
                this.setState({name:json.name});
                this.setState({type:json.type});
                this.setState({comment:json.comment});
                this.setState({image:json.image});

            } )
            .catch((response) => { //例外処理
                alert("カントー地方のポケモンでお願いします!!");
                console.log("error");
            })
    };
    render() {
    return (
      <div className="test">
          <h1>ポケモンずかん</h1>
          <img src={this.state.image} id="image" alt="ポケモンの画像"/>
          <p>{this.state.name}</p>
          <p>{this.state.type}</p>
          <p>{this.state.comment}</p>
          <p>1~151番までのポケモンを図鑑ナンバーを入力してね</p>
          <input type="text" id="input" />
          <input type="button" value="検索!" onClick={()=>{this.getPokemon()}} />
      </div>
    );
  }
}
export default App;