Next.js Discord

Discord Forum

Why won't the <li> element be returned in the loop

Unanswered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
Schneider’s Smooth-fronted CaimanOP
import axios from 'axios'

function page() {
    return (
        <div>

            <ul>
                {
                    axios.get("http://localhost:3000/api/pokemons")
                        .then((response) => {
                            const data = response.data.results
                            console.log(data)

                            // Display the data

                            data.map((pokemon, k) => {
                                return (
                                    <li key={k}>{pokemon.name}</li>
                                )
                            })
                        })

                        .catch(err => {
                            console.log(err)
                        })
                }
            </ul>

        </div>
    )
}

export default page


This is my code. I'm trying to return the <li> when the data array is looped. Why is it not displaying on the page?

No error, just blank

Edit: When I added 
"use client"


I go this error: 

Error: Hydration failed because the initial UI does not match what was rendered on the server.

6 Replies

@Schneider’s Smooth-fronted Caiman jsx import axios from 'axios' function page() { return ( <div> <ul> { axios.get("http://localhost:3000/api/pokemons") .then((response) => { const data = response.data.results console.log(data) // Display the data data.map((pokemon, k) => { return ( <li key={k}>{pokemon.name}</li> ) }) }) .catch(err => { console.log(err) }) } </ul> </div> ) } export default page This is my code. I'm trying to return the <li> when the data array is looped. Why is it not displaying on the page? No error, just blank Edit: When I added js "use client" I go this error: Error: Hydration failed because the initial UI does not match what was rendered on the server.
Coffee Coke
you can't do that inside the jsx. If you can achieve that by doing this:
import axios from "axios";
import {useState, useEffect} from "react";

export default function page(){
  const [data, setData] = useState();

  useEffect(() => {
    axios.get("http://localhost:3000/api/pokemons").then((res) => setData(res.data.results)).catch(err => console.log(err));
  }, []);

return (
  <div>
      <ul>
          {data.map((pokemon, k) => {
    return <li key={k}>{pokemon.name}</li>;
})}
      </ul>
  </div>
)
}


I would rather reading basics before building such "complex" applications
Schneider’s Smooth-fronted CaimanOP
Thanks a lot.
I'll go revisit react docs. Don't know much about useEffect
Schneider’s Smooth-fronted CaimanOP
Thanks a lot