Question 211018 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – when calling the api from server i am able to see the response but when using data.map() to iterate the data is not display in frontend in next js

when calling the API from server I am able to see the response but when using data.map() to iterate the data is not reflected in frontend in the next js

First I called the API from the server side and I was able to see the response .but when I try to iterate the data using the map function I am not able to see the data and there is no error.

Here is my code.

async function productlist(){
  
  let data = await fetch(`https://dummyjson.com/users`);
   data = await data.json();
  return data;
}

export default async function Home() {

  let data = await productlist();
  console.log("dataArr",data);
  console.log("dataArr",data[0].urls.small);
 
  return (
    
       <div>
      {/*<!-- Featured section -->*/}
<section className="py-20">
    <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-gray-800 mb-8">Free Stock Photos</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">

            {
              data.map((product)=>{
                <div className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 hover:opacity-80 transition duration-500 ease-in-out">
                <img src={product.firstName} alt="Coffee"
                    className="w-full h-full object-cover"/>        
                <h2>{product.firstName}</h2>      
                
            </div>

            })}
       </div>
    </div>
</section>
</div>
    
  )
}
Tags:

2

Answers


  1. 0 
       import {useState,useEffect} from 'react'

   
   export default function App() {
     const [state,setState] = useState([])
     const productlist=async()=>{
     
       let data = await fetch(`https://dummyjson.com/users`);
        data = await data.json()   
        setState(data.users)
      
     }
     useEffect(()=>{
   
       productlist()
     },[])
     console.log(state);
    
     
     
     return (
       <div className="App">
         <h1>Hello CodeSandbox</h1>
         <h2>Start editing to see some magic happen!</h2>
         {state.map((item)=>{
             return(
               <>
               <h1>{item.id}</h1>
               <h1>{item.firstName}</h1>
                {/* <img src={item.image}/> */}
               
               </>
             )
           })
         }
       </div>
     );
   }
    Login or Signup to reply.
  2. 0

    your .map function is not returning anything.

    you either have use an explicit return:

    data.map((product, index) => {
  return (
    <div
      key={index}
      className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 hover:opacity-80 transition duration-500 ease-in-out"
    >
      <img src={product.firstName} alt="Coffee" className="w-full h-full object-cover" />
      <h2>{product.firstName}</h2>
    </div>
  );
});

    or an implicit return:

    data.map((product, index) => (
  <div
    key={index}
    className="bg-white rounded-lg shadow-md overflow-hidden opacity-100 hover:opacity-80 transition duration-500 ease-in-out"
  >
    <img src={product.firstName} alt="Coffee" className="w-full h-full object-cover" />
    <h2>{product.firstName}</h2>
  </div>
));

    Have a look here

    Note: when using Array.prototype.map() inside JSX you have always to specify a unique key for each element of the returned array.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search