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
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>
})
}
</>
)
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>
);
})}
</>
);
}
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>
))