Having trouble rendering items in React.js-CodePudding

I'm pretty new to React, being very used to OOP this is kind of twisting my brain a bit!

I'm playing around with the PokeAPI, to show different stats of pokemon, I've gotten all my data into the array fine, I've just hit a brick wall when it comes to rendering it, nothing apears.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import PokemonRender from './PokemonRender';

ReactDOM.render(
  <React.StrictMode>
    <PokemonRender />
  </React.StrictMode>,
  document.getElementById('root')
);

PokemonRender:

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

const PokemonRender = () => {
    const pokemonList = [];

    const getPokemonData = async (id) => {
        try{
          const dataArray = [];
          const url = 'https://pokeapi.co/api/v2/pokemon/'   id;
          const res = await axios.get(url);
          dataArray.push(res.data);
          pokemonList.push(dataArray[0]);
          dataArray.length = 0;
        } catch(e) {
          console.log(e);
        }
    }
    
    const Pokemon = ({ id, name }) => (
        <div>
          <p>{id}</p>
          <p>{name}</p>
        </div>
    )
    
    useEffect((i) => {
        for(i = 1; i < 152; i  ) {
            getPokemonData(i);
    }   }, []);

    return (
        pokemonList.map((pokemon) => (
            <Pokemon id={pokemon.id} name={pokemon.name} />
        ))
    )
}

export default PokemonRender;

Any help is greatly appreciated! Many thanks.

CodePudding user response：

You need to use the state to handle data inside the component. You can do it by following this link. By the way, you should not getPokemonData in the loop like that. It will re-render your component 151 times.

CodePudding user response：

You need to call useState to make a re-rendering. Without it, React won't understand when to re-render your UI. In your case, you need to update pokemon list with useState

Did a small refactoring for your code which are removing dataArray, fixing useEffect, and moving your Pokemon component outside of PokemonRender to avoid calling it many times

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

const Pokemon = ({ id, name }) => (
  <div>
    <p>{id}</p>
    <p>{name}</p>
  </div>
);

const PokemonRender = () => {
  const [pokemonList, setPokemonList] = useState([]);

  const getPokemonData = async (id) => {
    try {
      const url = "https://pokeapi.co/api/v2/pokemon/"   id;
      const res = await axios.get(url);
      //pokemonList.push(res.data);
      setPokemonList([...pokemonList, res.data]); //add current data to the pokemon list
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    const blankArray = new Array(152);
    for (const i = 1; blankArray.length < 152; i  ) {
      getPokemonData(i);
    }
  }, []);

  return pokemonList.map((pokemon) => (
    <Pokemon id={pokemon.id} name={pokemon.name} />
  ));
};

export default PokemonRender;

useState is also asynchronous, so I think you keep updating data and UI at the same time which will make your data unsafe (maybe lost during re-rendering). So you should return data in a new array and then render all of them together. For example

const getPokemonData = async (id) => {
        try{
          const url = 'https://pokeapi.co/api/v2/pokemon/'   id;
          const res = await axios.get(url);
          dataArray.push(res.data);
          return res.data
        } catch(e) {
          console.log(e);
        }
}

Update useEffect with a list of pokemon

useEffect(() => {
    const blankArray = new Array(152)
    for(const i = 1; blankArray.length < 152; i  ) {
       pokemonListData.push(getPokemonData(i));
    }
    setPokemonList(pokemonListData) //only run once   
}, []);

Since you're new to these stuff, I'd suggest you follow up this document