React Map function not rendering on browser, but it is console.logging

Question

I'm working on a React homework assignment, working with the pokemon API. In this particular component, I'm accessing the API to return a list of all the pokemon names and render them to the browser.

I've called the API and mapped it out, and it seems to work when I console.log the names, but I'm not sure what I'm doing wrong that it is not rendering onto the actual browser, and could definitely use some help. Code:

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

function PokedexHome(){
    const [pokedexList, setPokedexList] = useState(undefined);
    const [isLoading, setIsLoading] = useState(true);
    const [hasError, setHasError] = useState(false);

    useEffect(() => {
        fetch(`https://pokeapi.co/api/v2/pokemon/?limit=100&offset=0`)
        .then(response => response.json())
        .then(data => {
                setPokedexList(data)
                setIsLoading(false);
            },
            error => {
                setHasError(true)
                setIsLoading(false)
            }
        );
    },[]);

    if(isLoading){
        return <p>Loading...</p>
    }

    if(hasError){
        return <p>An error has occurred, please try again later</p>
    }
    
    pokedexList.results.map((pokemon) => {
        console.log(pokemon.name)
        return <div className="list-container">
             <p>{pokemon.name}</p>
            </div>
           
      })
    };
      


export default PokedexHome

Answer 1

if you have a list then your PokedexHome returns void :)

so, first of all, you are missing a return before the map.

second, (if nothing changed lately) you can't return an array of components, you need to return a single component, which can be a Fragment (a React component without UI representation, created for this purpose)

return (
  <>
    {
      pokedexList.results.map((pokemon) => {
        console.log(pokemon.name)
        return <div className="list-container">
             <p>{pokemon.name}</p>
            </div>
           
      })

    }
  </>
)

Answer 2

Your component need to return a JSX, so add return and wrap your list with <></>.

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

function PokedexHome() {
  const [pokedexList, setPokedexList] = useState(undefined);
  const [isLoading, setIsLoading] = useState(true);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    fetch(`https://pokeapi.co/api/v2/pokemon/?limit=100&offset=0`)
      .then((response) => response.json())
      .then(
        (data) => {
          setPokedexList(data);
          setIsLoading(false);
        },
        (error) => {
          setHasError(true);
          setIsLoading(false);
        },
      );
  }, []);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (hasError) {
    return <p>An error has occurred, please try again later</p>;
  }

  return (
    <>
      {pokedexList.results.map((pokemon) => {
        console.log(pokemon.name);
        return (
          <div className="list-container">
            <p>{pokemon.name}</p>
          </div>
        );
      })}
    </>
  );
}

Answer 3

You miss the return keyword in front if pokedexList. It should be like this. And also add () on your return

return pokedexList.results.map((pokemon) => {
    return (
      <div className="list-container">
        <p>{pokemon.name}</p>
      </div>
    )
       
  })
};

Answer 4

The most probable issue I can think of here is, you are not wrapping the whole JSX in () round braces. It specifies that you want to return something. With main function return statement of course

Example code

Try wrapping it like this.

return  pokedexList.results.map((pokemon) => (
        
         <div className="list-container">
             <p>{pokemon.name}</p>
            </div>
           
      ))