I am new here and with React. I tried to get data via APı but I could not get any. Also, I did not get any error message as well. This is my code. I tried to add if statement to check whether data is fetched or not. When I check console I got the error message. Where did I wrong? Thanks for your time.

import React, {Component} from "react";

  class PokemonList extends Component {
  constructor(props) {
      super(props);
      this.state = {
      error: null,
      isLoaded: false,
      items: [],
    };
  }

componentDidMount() {
  fetch('https://pokeapi.co/api/v2/pokemon?limit=20')
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          isLoaded: true,
          items: result.items
        });
      },
      // Note: it's important to handle errors here
    // instead of a catch() block so that we don't swallow
    // exceptions from actual bugs in components.
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
}
render() {
  const { error,isLoaded, items } = this.state;
  if (error) {
    return <div>Error: {error.message}</div>;
   } else if (!isLoaded) {
   return <div>Loading...</div>;
  } else {
      
    return (
        
        <ul>
        {items ? items.map(item => (
          <li>
             <p key={item.id}>{item.name}</p>;
          </li>
        )) :
        console.log('no data')}
      </ul>
    );
  }
}

} export default PokemonList;

CodePudding user response：

The Pokémon items you're trying to get have a results key, not items. So replace result.items with result.results and see what happens.