MERN Stack youtube video React issues

JavaScript
#1

Hi i’ve been learning how to setup mern stack project according to freecodecamp’s youtube video: https://youtu.be/mrHNSanmqQ4
As a new react router dom new version (v6) has been released recently i’m having difficulties rendering components dependant on the ObjectId in the route. for example
rendering specific component with the ObjectId/_id params in the route such as “restaurants/5eb3d668b31de5d588f4293c” i get error that params is undefined;
it’s really frustrating as i’m still not fully familiar with ReactJs in order to integrate it with db properly.

moreover i’m having difficulties understanding how props are passed in the video’s source code. github.com/beaucarnes/restaurant-reviews

Thanks in advance

#2

that’s my source code

#3

If the tutorial is using version 5 of react-router-dom I would suggest you install that version instead of trying to use version 6 unless you are willing to upgrade and deal with any breaking changes.

I think you will have to be more specific with your question here.

#4

yeah sorry i’ll try to be more coherent.
in that app i can click on item from the list of restaurant and it show redirect me to a route with the _id in the url. for example restaurants/5eb3d668b31de5d588f4292a.
when i get redirected i receive multiple errors on the client side “cannot read properties of undefined (reading ‘params’)”. so it’s hard for me to understand to how do i retrieve those params in react from the backend as params.
i hope i explained it clearly this time

#5

Did you try the useParams hook?

So instead of props.match.params.id you can get the id inside the component and use that instead.

const { id } = useParams();

Without a live version, it is hard to help without having to set up the backend ourselves to test it.

#6

thanks! i’m gonna update the code with useParams! just tested on console and it did retrieve the id

#7

ok so my problem now is the useParams only retrieves one value which is the ObjectId.
in the older version of react-router-dom you could pass all the props with render function:

 render={(props) => (
              <Restaurant {...props} user={user} />
            )

but now on react-router-dom v6 the syntax is the following:

<Route path="/restaurants" element={<RestaurantsList user={user} />} />

meaning i can’t access the full props as the older version. so i can’t access values like props.history , props.location etc.
because i don’t pass it as render function with the following props: {...props}

i’m sorry but i can’t deploy my code live as i haven’t finished the final part of the tutorial to deploy and integrate backend and frontend

edit:
this is how printing props in console in the older version of react-router
image

ok so i’ve managed to serve my project live online:
https://mern-ojjgv.mongodbstitch.com/

so the issues i’m facing right now are if i click a specific restaurant it’s loading the details well except the reviews which i added some on my db. it just can’t retrieve from the db the reviews referred to the _id of specific restaurant.

besides that when i press add review i get the following errors:>

react-dom.production.min.js:216 TypeError: Cannot read properties of undefined (reading 'state')
    at ue (add-review.js:10)
    at la (react-dom.production.min.js:157)
    at Kl (react-dom.production.min.js:267)
    at Pu (react-dom.production.min.js:250)
    at Tu (react-dom.production.min.js:250)
    at Ou (react-dom.production.min.js:250)
    at bu (react-dom.production.min.js:243)
    at react-dom.production.min.js:123
    at t.unstable_runWithPriority (scheduler.production.min.js:18)
    at Qo (react-dom.production.min.js:122)
cl @ react-dom.production.min.js:216
react-dom.production.min.js:123 Uncaught TypeError: Cannot read properties of undefined (reading 'state')
    at ue (add-review.js:10)
    at la (react-dom.production.min.js:157)
    at Kl (react-dom.production.min.js:267)
    at Pu (react-dom.production.min.js:250)
    at Tu (react-dom.production.min.js:250)
    at Ou (react-dom.production.min.js:250)
    at bu (react-dom.production.min.js:243)
    at react-dom.production.min.js:123
    at t.unstable_runWithPriority (scheduler.production.min.js:18)
    at Qo (react-dom.production.min.js:122)

and on login page when i fill the inputs and pressing login (this is just a dummy login it doesn’t validate anything). i get that error:

login.js:19 Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at onClick (login.js:19)
    at Object.We (react-dom.production.min.js:52)
    at Ye (react-dom.production.min.js:52)
    at react-dom.production.min.js:53
    at Tr (react-dom.production.min.js:100)
    at Nr (react-dom.production.min.js:101)
    at react-dom.production.min.js:113
    at Re (react-dom.production.min.js:292)
    at react-dom.production.min.js:50
    at Mr (react-dom.production.min.js:105)
onClick @ login.js:19
We @ react-dom.production.min.js:52
Ye @ react-dom.production.min.js:52
(anonymous) @ react-dom.production.min.js:53
Tr @ react-dom.production.min.js:100
Nr @ react-dom.production.min.js:101
(anonymous) @ react-dom.production.min.js:113
Re @ react-dom.production.min.js:292
(anonymous) @ react-dom.production.min.js:50
Mr @ react-dom.production.min.js:105
Zt @ react-dom.production.min.js:75
Jt @ react-dom.production.min.js:74
t.unstable_runWithPriority @ scheduler.production.min.js:18
Qo @ react-dom.production.min.js:122
De @ react-dom.production.min.js:292
Xt @ react-dom.production.min.js:73