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

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...

9 Replies

glutonium•7mo ago

maybe show the reponse data as well as what actually shows up on the page

SsteOP•7mo ago

here, how data looks like

SsteOP•7mo ago

in the html, the ul tag is empty

glutonium•7mo ago

is the moviesData logging out successfully?

glutonium•7mo ago

btw u got a try catch block in getMovie() u dont need another one in useEffect

useEffect(() => {
  if (!mood) return;
  getMovie(mood)
  .then((moviesData) => setMovies(moviesData))
  .catch(err => console.log(err));
}, [mood]);

useEffect(() => {
  if (!mood) return;
  getMovie(mood)
  .then((moviesData) => setMovies(moviesData))
  .catch(err => console.log(err));
}, [mood]);

maybe try this idk i dont see the issue here

SsteOP•7mo ago

nothing is be rendering. And if I reload the page, it is not be calling the api

Silvershot•7mo ago

check if the movies array is empty. if it is, dont loop over the movies list. try this. probably not too important, just want to make sure

{movies.length > 0 && movies.map(......)}

{movies.length > 0 && movies.map(......)}

did it work?

SsteOP•7mo ago

not

Silvershot•7mo ago

try moving your "/" route to the very end of the Routes list below movies/:mood also how is it possible to pass mood as a prop and not use useParams? is it a new react feature?

Gaming

Programming

Data from API is displaying in the console but not in the DOM, why?