import React from 'react';
import {Link} from 'react-router-dom';

import {Pokemon} from '../../../api';

class PokemonIndex extends React.Component {
  state = {
    pokemon: [],
  };

  render() {
    const pokemon = this.state.pokemon.map((pkmn, i) => {
      return (
        <li key={pkmn.id}>
          <Link to={`/pokemon/${pkmn.id}`}>{pkmn.nickname}</Link>
        </li>
      );
    });

    return <ul>{pokemon}</ul>;
  }
}

export default PokemonIndex;