pokemon.trade/app/javascript/packs/frontend/components/pages/pokemon/index.tsx

import React from 'react';
import {RouteComponentProps} from 'react-router'; //eslint-disable-line no-unused-vars
import {Link} from 'react-router-dom';

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

interface Pokemon {
  id: number;
  nickname: string;
}

interface State {
  pokemon: Pokemon[];
}

class PokemonIndex extends React.Component<RouteComponentProps<void>, State> {
  public state = {
    pokemon: [],
  };

  public async componentDidMount(): Promise<void> {
    try {
      const data = await Pokemon.index();
      this.setState({pokemon: data.data});
    } catch (err) {
      // eslint-disable-next-line no-console
      console.log(JSON.stringify(err, null, 2));
    }
  }

  public render(): JSX.Element {
    const pokemon: JSX.Element[] = this.state.pokemon.map(
      (pkmn): JSX.Element => (
        <li key={pkmn.id}>
          <Link to={`/pokemon/${pkmn.id}`}>{pkmn.nickname}</Link>
        </li>
      )
    );

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

export default PokemonIndex;