Estou fazendo um teste para um emprego, o teste consiste em buscar os filmes mais populares atráves de uma api do TheMovieDB e listar esses filmes. Em cada filme deve ter um botão de favoritar e ao clicar deve ser gravado os dados desse filme no banco de dados. Consegui buscar e listar os filmes, mas não estou conseguindo pegar os dados do filme ao clicar em favoritar. Minha ideia foi criar um formulário para cada filme listado (cada um contém Title e Overview). Ao clicar no botão favorito específico (que é do tipo submit), quero pegar esses dados. Iniciei um estado de cada variável (title e overview) como vazio, mas ao clicar no submit, elas continuam vazias, não adquirem os valores que busquei da api.
import React, { useState, useEffect } from ‘react’
import api from ‘…/…/services/api’
import ‘./styles.css’
function Main() {
const [movies, setMovies] = useState([])
const [title, setTitle] = useState('')
const [overview, setOverview] = useState('')
function handleFavorites(e) {
e.preventDefault()
console.log(title)
console.log(overview)
}
useEffect(() => {
api.get('').then(response => {
setMovies(response.data.results)
})
})
return (
<div className="movie-list">
{movies.map(movie => (
<form onSubmit={handleFavorites} key={movie.id}>
<article >
<strong>{movie.title}</strong>
<input type="hidden" value={title} onSubmit={(e) => e.target.value = movie.title} onChange={(e) => { setTitle(e.target.value) }} />
<p>{movie.overview}</p>
<input type="hidden" value={overview} onSubmit={(e) => e.target.value = movie.overview} onChange={(e) => { setOverview(e.target.value) }} />
<button type="submit">Favoritar</button>
</article>
</form>
))}
</div>
)
}
export default Main