Tutorial 7 Error: Cannot read properties of undefined (reading 'params') in Room.js

[jonwright13]

In Room.js, the line:

this.roomCode = this.props.match.params.roomCode;

Picks up an Uncaught TypeError, as the properties of 'params' can't be read.

[cambraatz]

I ran into the same issue, the issue lies in the new React...where .params are no longer supported in class functions. I saw a comment on youtube that got me mostly there. My solution (does not include UseEffect() yet) was to convert Room() to a functional Component and implement useParams() instead of the original "props.match.params.roomCode".

import React, { Component, useState } from 'react';
import { useParams } from 'react-router-dom';

function Room() {
const { roomCode } = useParams()
const initialState = {
votesToSkip: 2,
guestCanPause: false,
isHost: false
}
const [roomData, setRoomData] = useState(initialState)

return(
    <div>
        <h3>{roomCode}</h3>
        <p>Votes: {roomData.votesToSkip}</p>
        <p>Guest Can Pause: {roomData.guestCanPause.toString()}</p>
        <p>Host: {roomData.isHost.toString()}</p>
    </div>
); 

}

export default Room;

[Ayatade]

Has this issue been fixed?

[jonwright13]

I managed to find a solution where I wrapped the Room class with a component to pass additional props to it.

function withParams(Component) {
return (props) => (
<Component {...props} params={useParams()} navigate={useNavigate()} />
);
}

and then at the bottom of the code:

export default withParams(Room);

This seemed to work well for me.