Using useParams() to show correct details when editing page-CodePudding

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

CodePudding user response：

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

CodePudding user response：

You should add a condition in your code

For example:

movies={movies.find(movie => movie.id===3)}

CodePudding user response：

In order to access the url params on the route level, I think you will need to use react-router's render method:

<Route
  render={
    ({ match }) => <EditMovieForm movies={movies.find(movie => movie.id === match.params.id)}
  }
/>

Or attentively, you can pass you movies array down to the form and the do the find there useing the useParams hook.