Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

202
Views
Why do I get undefined when I try to map a Json array using react?

I would like to map my DB but it doesn't work

import React, { useState,useEffect } from "react";
import TheCard from "../Components/TheCard";
import "./styles.css";
import datas from './Search'
import searchTerm from './Search'
import axios from 'axios';



function Card() {

   const [posts,setPosts]=useState([])
   useEffect(() => {
 
     fetchPosts();
   }, [])
 
   const fetchPosts = async () => {
     try {
       const response =  axios.get('http://localhost:3000').then((value)=>{
       setPosts(value.data);
     console.log(value)
 
     });
 
       // console.log(response)
     } catch (err) {
       if (err.response) {
         // Not in the 200 response range 
         console.log(err.response.data);
         console.log(err.response.status);
         console.log(err.response.headers);
       } else {
         console.log(`Error: ${err.message}`);
       }
     }
   }
   
const data=[]
for(var i in posts) {
   data.push(posts[i]);
}
if(!Array.isArray(data)){ 
   throw new Error('expected the response to be an array(data)');
}
if(!Array.isArray(posts)){ 
   throw new Error('expected the response to be an array (posts)');
}
console.log(data)
 return (
 <div>

{
     data.map((item, key) => 
       <ul key={key}>
       <TheCard movie={item} />
       
       </ul>
     )}
   </div>
 )}


export default Card;

The data is an array but when I map it I get this img

if the script was working, I would get the URL of the image and when I click on it it will take me to localhost:3000/movie/:id but I always get localhost:3000/movie/undefined

ps: when i console.log data i get this: Object config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …} data: people: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] [[Prototype]]: Object headers: {content-length: '10276', content-type: 'application/json; charset=utf-8'} request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} status: 200 statusText: "OK" [[Prototype]]: Object

my bd

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!