2

Tengo este codigo escrito en ReactJS, lo que hace en resumen es sencillo, me conecta a una API, y en teoria, deberia renderizarlo, es decir, mostrarlo en el navegador. Estuve viendo durante horas cual podria ser el error, pero no lo encuentro, no puedo hacer que este codigo se renderize, como lo soluciono?

import React, { useEffect, useState } from 'react'

export const TVShows = () => {
  const [ loadMovies, setLoadMovies] = useState(false)
  const [ movie, setMovie ] = useState({})
  
  useEffect(()=>{
    const apiMovies = `https://api.themoviedb.org/3/movie/popular?api_key=86d14782edf23&lenguage=es-MX`
    fetch(apiMovies)
    .then(resp => resp.json())
    .then( movieRequest => {console.log(movieRequest.results)

      setMovie(movieRequest)
      setLoadMovies(true)
    })
  },[])

  return (<>`introducir el código aquí`
  {loadMovies ? movie.map( movie => {return <ul><li key={movie.id}>{movie.title}</li> </ul>}):'i'}  
      
    <input type='text' placeholder='Ingrese un texto'></input>

    {/* CARTAS */}
    <div id='carta'>
      
    </div>
  </>)
}
3
  • Oie como sugerencia, cuando coloques preguntas que incluyan APIs quita la URL y peor cuando tienen api_keys
    – Alfa Rojo
    Commented el 22 feb. 2023 a las 15:02
  • 1
    ahi modifique el key, muchas gracias
    – sandiooo
    Commented el 22 feb. 2023 a las 15:09
  • Si te fue de ayuda la publicacion pasada por favor vota para que se difunda y el proceso mejore, saludos
    – g.4
    Commented el 18 may. 2023 a las 4:01

1 respuesta 1

3

El problema esta en que movie es un objeto, no es un array. El array se encuentra en movie.results.

Cambia

{loadMovies ? movie.map( movie => {return <ul><li key={movie.id}>{movie.title}</li> </ul>}):'i'}  

a

{loadMovies ? movie.results.map( movie => {return <ul  key={movie.id}><li>{movie.title}</li> </ul>}):'i'}  

Ademas te recomiendo que el atributo key lo cambies a la etiqueta padre del return. En este caso a la etiqueta <ul key={movie.id}>.

1
  • Me funciono, eres un genio!
    – sandiooo
    Commented el 22 feb. 2023 a las 16:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.