Using useParams() to show correct details when editing page

March 30, 2022

I want to edit specific movies when I click on my edit button. The edit button redirects me to a form that I would like to populate with information from the specific movie I interacted with

App.js

<Switch>
        <Route exact path="/movies/edit/:id">
          <EditMovieForm movies={movies.find(movie => movie.id)}/>
        </Route>
      ...
      </Switch>

EditMovieForm:

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: ""
    });

and the code showing the movie details:

        <div className="modal-header">                      
            <h4 className="modal-title">Editing <strong>{movie.title}</strong></h4>
        </div>

This is what I get when I console log movies

{id: '1iNN0', title: 'The Godfather', director: 'Francis Ford Coppola', metascore: 100, genre: 'Drama', …}

This is the first movie from an array of movies. I only get this movie on my console log regardless of which edit movie button I click

>Solution :

Your movies.find condition is not doing anything, it will just return the first movie that comply with the condition of having an id.

To make this work I will just pass the whole movies (it even makes more sense since the prop is called movies) array to the component and inside of it perform the filtering based on your id param.

<Switch>
 <Route exact path="/movies/edit/:id">
   <EditMovieForm movies={movies}/>
 </Route>
</Switch>

Afterwards in your component simply do this:

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);