pass in props into component to render-CodePudding

// Warning: Cannot read properties of undefined (reading 'params')

// im try to get movie_id from movielist.js to view single movie on movie.js onclicking view review // basically my error is from inability to pass the props into movie.js

//in nav/index.js

import { BrowserRouter as Router, Routes, Route, useParams} from "react-router-dom";
import Navbar from './navbar';
import MovieList from "../components/movie-list"
import Movie from "../components/movie"

const Nav = () => {
    return (
        <Router>
            <Navbar/>
            <Routes>
                <Route exact path={'/'} element={<MovieList/>}/>
                <Route path='/movies/:id/' element={<Movie props={useParams()} />} />
        </Routes>
    </Router>
)}

//in movielist.js

import React, {useState, useEffect} from 'react'
import MovieDataService from "../services/movie"
import { Link } from 'react-router-dom'

const MovieList = () => {
        ....
  return (
    <div>
        ....
     <div>
      {movies.map((movie)=>{
        return(
          <div className="card" key={movie._id}>
            <div className="card-container">
              <div className='card-img'>
                <img src={movie.poster "/100px180"} alt=""/>
              </div>
              <div className="card-body">
                <h1>{movie.title}</h1>
                <h2>Rating:{movie.rated}</h2>
                <p>{movie.plot}</p>
                <Link to={"/movies/" movie._id}>View Review</Link>
              </div>
            </div>
          </div>
        );
      })}
    </div>
</div>

) }

// in movie.js

import React, { useState, useEffect } from 'react'
import MovieDataService from '../services/movie'
import { Link } from 'react-router-dom'

const Movie = (props) => {


useEffect(()=>{
getMovie(props.match.params.id)
},[props.match.params.id]) //won't call getMovie Multiple times unless id is updated.

return (
<div>
  <div className="card-container">
    <div className='card-img'>
      <img src={movie.poster "/100px250"} alt=""/>
    </div>
    <div className="card-body">
      <h1>{movie.title}</h1>
      <p>{movie.plot}</p>
      {props.user && <Link to={"/movies/" props.match.params.id "/review"}>Add Review</Link>
      }
    </div>
  </div>
      );
    })}
  </div>
</div>

) }

CodePudding user response：

If you need to pass props why don't pass it when you use Map in MovieList ?

import React, {useState, useEffect} from 'react'
import MovieDataService from "../services/movie"
import { Link } from 'react-router-dom'
import {movie} from "./movie" // change this path to your movie folder path
const MovieList = () => {
        ....
  return (
    <div>
        ....
     <div>
      {movies.map((movie)=>{
        return(
          <Movie title={movie.title} plot={movie.plot} rated={movie.rated} image={movie.poster}/>
        );
      })}
    </div>
</div>

After this , you will see the props in your movie component. Try to console.log it using useEffect

CodePudding user response：

Use useParams() hook to get url params.

const {id} = useParams()

useEffect(()=>{
getMovie(id)
},[id])

replace props.match.params.id with id everywhere

CodePudding user response：

You do not need to pass useParams() hook as a prop in Movie.js. You can simply get the id of movie in Movie component by using let { id} = useParams(); Full code;

import React, { useState, useEffect } from 'react'
import MovieDataService from '../services/movie'
import { Link } from 'react-router-dom'

const Movie = (props) => {


useEffect(()=>{
let {id} = useParams();
getMovie(id)
},[id]) //won't call getMovie Multiple times unless id is updated.

return (
<div>
  <div className="card-container">
    <div className='card-img'>
      <img src={movie.poster "/100px250"} alt=""/>
    </div>
    <div className="card-body">
      <h1>{movie.title}</h1>
      <p>{movie.plot}</p>
      {props.user && <Link to={"/movies/" props.match.params.id "/review"}>Add Review</Link>
      }
    </div>
  </div>
      );
    })}
  </div>
</div>