pokemonlist.js

import React, { Component } from 'react';
import { PokemonListModel } from './pokemon-model';

interface PokemonProps {}
interface PokemonState {
  pokemonList: PokemonListModel | null;
}

class PokemonList extends Component<PokemonProps, PokemonState> {

  constructor (props) {
    super(props);
    this.state = {
      pokemonList: null
    }
  }

  getPokemonList = () => {
    fetch ('https://pokeapi.co/api/v2/pokemon/?limit=50')
      .then (response => {
        return response.json();
      })
      .then (response => {
        this.setState({ pokemonList: response });
      })
  }

  render () {
    let { pokemonList } = this.state;
    return (
      <div className='pokemon-list'>
        {
          pokemonList && pokemonList.results.map (pokemon => {
            return (
              <div className='row' key={pokemon.name}>
                <span>{pokemon.name}</span>
              </div>
            )
          })
        }
      </div>
    )
  }

  componentDidMount () {
    this.getPokemonList()
  }
}

export default PokemonList