Data from API is displaying in the console but not in the DOM, why?
Hey, I wanna display in the page the data from the api, but for some reasone, it is not be rendering.
api.jsx file
Movies.jsx file component where I wanna display the api data
I am exporting the Movies component in the App as the image you see below...
api.jsx file
import axios from 'axios';
const BASE_URL = 'http://127.0.0.1:5000';
export const getMovie = async (mood) => {
try {
console.log('Fetching movies for mood:', mood)
const response = await axios.get(`${BASE_URL}/recomendar`, {
params: { mood: mood },
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
console.log(response.data);
return response.data;
} catch (error) {
console.error('Error fetching movies:', error);
throw error;
}
}import axios from 'axios';
const BASE_URL = 'http://127.0.0.1:5000';
export const getMovie = async (mood) => {
try {
console.log('Fetching movies for mood:', mood)
const response = await axios.get(`${BASE_URL}/recomendar`, {
params: { mood: mood },
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
console.log(response.data);
return response.data;
} catch (error) {
console.error('Error fetching movies:', error);
throw error;
}
}Movies.jsx file component where I wanna display the api data
import React, { useEffect, useState } from "react";
import { getMovie } from "../services/api";
const Movies = ({ mood }) => {
const [movies, setMovies] = useState([]);
useEffect(() => {
const fetchMovies = async () => {
if (mood) {
try {
const moviesData = await getMovie(mood);
console.log(moviesData);
setMovies(moviesData);
} catch (error) {
console.error("Error fetching movies:", error);
}
}
};
fetchMovies();
}, [mood]);
return (
<div style={{ padding: "128px" }}>
<h3>ooos</h3>
<ul>
{movies.map((movie) => (
<li key={movie.id}>
<div>{movie.title}</div>
<div>{movie.genre}</div>
</li>
))}
</ul>
</div>
);
};
export default Movies;import React, { useEffect, useState } from "react";
import { getMovie } from "../services/api";
const Movies = ({ mood }) => {
const [movies, setMovies] = useState([]);
useEffect(() => {
const fetchMovies = async () => {
if (mood) {
try {
const moviesData = await getMovie(mood);
console.log(moviesData);
setMovies(moviesData);
} catch (error) {
console.error("Error fetching movies:", error);
}
}
};
fetchMovies();
}, [mood]);
return (
<div style={{ padding: "128px" }}>
<h3>ooos</h3>
<ul>
{movies.map((movie) => (
<li key={movie.id}>
<div>{movie.title}</div>
<div>{movie.genre}</div>
</li>
))}
</ul>
</div>
);
};
export default Movies;I am exporting the Movies component in the App as the image you see below...
