Trouble with dividing an API into multiple components instead of just one-CodePudding

I'm having trouble for the past few days in this problem.

Explanation of the problem: I'm using Axios in order to get data inside of state (Pokémon's), But, everything is rendering inside one component (creating an array and list and shows the list) , while I need every Pokémon I get from the API to be inside his own component (so that I can images per Pokémon and etc.) Does anybody perhaps knows how to do so? If u do, please answer and explain to me (And if it wont be any trouble, modify the code), Thanks in advance, Mikey. (Using react-ts, node.js and axios)

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function PokeCont() {
  const [pokemons, setPokemons] = useState<any>();

  const onClick = () => {
    axios.get('https://pokeapi.co/api/v2/pokemon?limit=6').then((response) => {
      setPokemons(response.data.results);
    });
  };

  useEffect(() => {
    onClick();
  }, []);

  return (
    <div>
      {pokemons &&
        pokemons.map((pokemon: any) => (
          <div key={pokemon.name}>
            <p>{pokemon.name}</p>
          </div>
        ))}
    </div>
  );
}

CodePudding user response：

Add necessary changes to components like export default and types.


import React, { useState, useEffect } from 'react'
import axios from 'axios'

  ***Component 1: Pokemon***

Pokemon = props => {

    return (
        <>
            <div key={props.name}>
                <p>{props.name}</p>
            </div>
        </>
    )
}

  ***Component 2: Parent Pokemon which renders your Pokemon as Component ***

export default function PokeClass() {
    const [pokemons, setPokemons] = useState()

    const onClick = () => {
        axios.get("https://pokeapi.co/api/v2/pokemon?limit=6").then((response) => {
            setPokemons(response.data.results)
        })
    }

    useEffect(() => {
        onClick()
    }, []);


    return (
        <>
            {pokemons.map((item => {
                return <Pokemon name={item.name} />

            }))}
        </>
    )


}

CodePudding user response：

Here is an example ;)

import { useState, useEffect } from "react";
import axios from "axios";

export default function App() {
  return (
    <div className="App">
      <PokemonContainer />
    </div>
  );
}

function PokemonContainer() {
  const [pokemons, setPokemons] = useState<any[]>([]);

  const onClick = () => {
    axios.get("https://pokeapi.co/api/v2/pokemon?limit=6").then((response) => {
      setPokemons(response.data.results);
    });
  };

  useEffect(() => {
    onClick();
  }, []);

  return (
    <div>
      {pokemons &&
        pokemons.map((pokemon) => (
          <PokemonItem key={pokemon.name} info={pokemon} />
        ))}
    </div>
  );
}

function PokemonItem({ info }) {
  return (
    <div>
      <h2>{info.name}</h2>
      <img src={info.image} width="100" height="100" alt=""></img>
    </div>
  );
}