I was practicing my MERN skills by building an exercise tracker and then I faced this error: "Uncaught TypeError: Cannot read properties of undefined (reading 'params')". I recently found a solution that guided me to use the "useParams" hook. But that is of no use for me since I am using the class component. Below is the code block creating the problem:

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"
import axios from "axios";
import { Params } from "react-router-dom";

export default class EditExercises extends Component {
    constructor(props) {
        super(props);

        this.onChangeUsername = this.onChangeUsername.bind(this);
        this.onChangeDescription = this.onChangeDescription.bind(this);
        this.onChangeDuration = this.onChangeDuration.bind(this);
        this.onChangeDate = this.onChangeDate.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            username: "",
            description: "",
            duration: 0,
            date: new Date(),
            users: []
        }
    }

    componentDidMount() {
        axios.get("http://localhost:5000/exercises/"   this.props.match.Params.id)
            .then(response => {
                this.setState({
                    username: response.data.username,
                    description: response.data.description,
                    duration: response.data.duration,
                    date: new Date(response.data.date)
                })
            })
            .catch(error => console.log(error));

CodePudding user response：

There is a problem in your route, please share that file. Does it has the route :id in it? Like this

If not please add it because the router dom could not found it there. And if it is there, change the name of Params to params ( one with lower case )

CodePudding user response：

It must be params instead of Params

axios.get("http://localhost:5000/exercises/"   this.props.match.params.id)