pokedex

pokedex example

by objectiveLength

HTML

<div id="app"></div>

Babel + JSX

class TodoApp extends React.Component {
state = {
    loading: true,
    pokemon: [],
  };


  async componentDidMount() {
    const url = "https://pokeapi.co/api/v2/pokemon/";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ pokemonList: data.results, loading: false });
    console.log(data.results);
  }

  render() {
    return (
      <div>
        {this.state.loading || !this.state.pokemonList ? (
          <div>loading...</div>
        ) : (<div>
          <div>{this.state.pokemonList.map((pokemon, i) =>
            <tr key={i}>
              <td>{pokemon.name}</td>
              <td>{pokemon.url}</td>
            </tr>
          )}
          </div>
        </div>
          )}
      </div>
    );
  }
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))