Quiero editar películas específicas cuando hago clic en mi botón de edición. El botón de edición me redirige a un formulario que me gustaría completar con información de la película específica con la que interactué.
Aplicación.js
<Switch> <Route exact path="/movies/edit/:id"> <EditMovieForm movies={movies.find(movie => movie.id)}/> </Route> ... </Switch>Editar formulario de película:
const EditMovieForm = (props) => { const { push } = useHistory(); const { movies } = props const { id } = useParams() console.log('id',id) console.log('movies', movies) const { setMovies } = props; const [movie, setMovie] = useState({ title:"", director: "", genre: "", metascore: 0, description: "" });y el código que muestra los detalles de la película:
<div className="modal-header"> <h4 className="modal-title">Editing <strong>{movie.title}</strong></h4> </div>Esto es lo que obtengo cuando registro películas en la consola
{id: '1iNN0', title: 'The Godfather', director: 'Francis Ford Coppola', metascore: 100, genre: 'Drama', …}Esta es la primera película de una serie de películas. Solo obtengo esta película en el registro de mi consola, independientemente del botón de edición de película en el que haga clic
Debes agregar una condición en tu código.
Por ejemplo:
movies={movies.find(movie => movie.id===3)}Su condición movies.find no está haciendo nada, solo devolverá la primera película que cumpla con la condición de tener una identificación.
Para hacer que esto funcione, solo pasaré la matriz completa de películas (incluso tiene más sentido ya que el accesorio se llama películas) al componente y dentro de él realizaré el filtrado en función de su parámetro de identificación.
<Switch> <Route exact path="/movies/edit/:id"> <EditMovieForm movies={movies}/> </Route> </Switch>Luego, en su componente, simplemente haga esto:
const { movies } = props const { id } = useParams() // Find the movie that matches with your param id const matchingMovie = movies.find((movie) => movie.id === id) ?? { title:"", director: "", genre: "", metascore: 0, description: "" } // Guessing you want to use the match here. const [movie, setMovie] = useState(matchingMovie);Para acceder a los parámetros de URL en el nivel de ruta, creo que necesitará usar el método de render react-router :
<Route render={ ({ match }) => <EditMovieForm movies={movies.find(movie => movie.id === match.params.id)} } /> O atentamente, puede pasar su matriz de películas al formulario y hacer la find allí usando el gancho useParams .