Pokedex project api react js

Я пытаюсь учиться, реагировать на нас и пытаюсь загрузить API в свое приложение pokedex. https://pokeapi.co/api/v2/pokedex/1/ I Я пытаюсь загрузить каждого покемона из списка (pokemon_entries), но не знаю, как это сделать

Я уже создал карту разных покемонов и попытался загрузить список в своем приложении.

СписокПокемон

import React from 'react';
import Loader from '../components/Loader';



class ListPokemon extends React.Component {
    state = {
        isLoading: false,
        data: [ ]

      };

    async componentDidMount() {
        this.setState({isLoading:true})
        const {name, url} = this.props;

        try {
            const response = await fetch(`https://pokeapi.co/api/v2/pokedex/1/`);
            const json = await response.json();
            this.setState({data: json,isLoading:false})
            console.log({json})
          } catch (err){
            console.log(err.msg);
            this.setState({isLoading:false})
            throw err
        }
    }



    render() {
        const {isLoading,data} = this.state;
        return (
          <>
            <h1>Lorem</h1>
          {
            isLoading ?<Loader/> : <h1>{data.entry_number}</h1>
          }


          </>
        );
      }
    }


export default ListPokemon

DataPokemon:

import React from 'react';
import { Card,Container,Row,Col } from 'react-bootstrap';

const DataPokemon = props =>  {const { name } = props;


return(
    <Container>
  <Row>
  <Col xs={6}>
    <Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>{name}</Card.Title>
    <Card.Text>

    </Card.Text>
    {/* <Button variant="primary">Go somewhere</Button> */}
  </Card.Body>
</Card>
</Col>
</Row>
</Container>
)
}





export default DataPokemon;

Спасибо !