Poco a poco estoy aprendiendo a reaccionar y tratando de mostrar los resultados de mi función searchMap (título/póster de la película) con la API de TMDB. Puedo registrar la información que necesito en la consola, pero obtengo variables no definidas y otros errores al intentar mostrar la información en el div comentado. https://codesandbox.io/s/ddmdu4
function App() { const search = async (event) => { const searchQuery = event.target.value; if (searchQuery) { const searchReq = await fetch( `https://api.themoviedb.org/3/search/movie?api_key=${process.env.API_KEY}&query=${searchQuery}` ).then((res) => res.json()); const searchResults = searchReq.results; searchMap(searchResults); } }; const searchMap = (searchResults) => { searchResults.map((movie) => { console.log(`${movie.title}`); console.log(`${movie.backdrop_path}`); }); }; return ( <div className="App"> <div> <input type="text" onChange={search} placeholder="Search"></input> </div> <div>{/* Display movie title/poster*/}</div> </div> ); } export default App;Dado que desea actualizar el DOM cada vez que cambia el resultado, recomendaría usarlo dentro de un estado como este:
const [searchResults, setSearchResults] = React.useState([]); En su función de search asíncrona, actualice el estado usando su "establecedor" apropiado:
.then((res) => res.json()); setSearchResults(searchReq.results);Y dentro de su devolución puede mapear el resultado de la siguiente manera:
<div> {searchResults.map((movie) => ( <> <div>{movie.title}</div> <div>{movie.backdrop_path}</div> </> ))} </div>