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