React - Uncaught TypeError: Cannot read properties of undefined (reading 'params')

Question

I receive this error when trying to edit an 'exercise' The error points to line 28 in exercises.component.js shown below:

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

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

    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.onChangeWorkout = this.onChangeWorkout.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: '',
      workout: '',
      description: '',
      duration: 0,
      date: new Date(),
      users: []
    }
  }

  componentDidMount() {
    axios.get('http://localhost:5000/exercises/' + this.params.id)
      .then(response => {
        this.setState({
          username: response.data.username,
          workout: response.data.workout,
          description: response.data.description,
          duration: response.data.duration,
          date: new Date(response.data.date)
        })
      })
      .catch(function(error) {
        console.log(error);
      })

    axios.get('http://localhost:5000/users/')
      .then(response => {
        if (response.data.length > 0) {
          this.setState({
            users: response.data.map(user => user.username),
          })
        }
      })
      .catch((error) => {
        console.log(error);
      })

  }

I acknowledge from another similar question with response that params is outdated from the tutorial I had been working from and useParams() must be used instead in the version 5 and abover in React. However I cannot seem to figure out how to include useParams() to be able to pass in the id and edit the document.

Any help would be greatly appreciated.

My App.js :

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css"


import Navbar from "./components/navbar.component";
import ExercisesList from "./components/exercises-list.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";
import EditExercises from "./components/edit-exercises.component";
import CreateMealPlan from "./components/create-meal-plan.component";
import EditMealPlan from "./components/edit-meal-plan.component";
import MealPlanList from "./components/meal-plan-list.component"

function App() {
  return (
    <Router>
      <div className="container">
        <Navbar />
        <br/>
        <Routes>
          <Route path="/" exact element={<ExercisesList/>} />
          <Route path="/meal-plan" exact element={<MealPlanList/>} />
          <Route path="/edit/:id" element={<EditExercises/>} />
          <Route path="/editMeal/:id" element={<EditMealPlan/>} />
          <Route path="/create" element={<CreateExercise/>} />
          <Route path="/createMeal" element={<CreateMealPlan/>} />
          <Route path="/user" element={<CreateUser/>} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

First question on StackOverflow appreciate any help and hope I can respond to any comments correctly :)

what version of `react-router-dom` you are currently using ? — Abbas Hussain, Apr 05 '22 at 13:19
Line 28 is this: `axios.get('http://localhost:5000/exercises/' + this.props.match.params.id)`??? — assembler, Apr 05 '22 at 13:21
@assembler yes that is line 28, new to this should have pointed that out — andrewnev, Apr 05 '22 at 13:23
Looks like your first code snippet is from a class based component. So, how do you pass the prop `params` into it? Where does it come from? — assembler, Apr 05 '22 at 13:35
@assembler - in the constructor I only have the props of the exercise e.g. username, workout etc. Params is not passed in when I look at my code, the tutorial I followed has no mention of passing it in. Unsure how to respond — andrewnev, Apr 05 '22 at 13:48
The thing is the prop `match` is not ready right after the component is mounted. So, why not to show us how do you pass these props? — assembler, Apr 05 '22 at 14:07
@assembler - updated question. Appreciate the explanation, seems I don't pass in the prop match and params. This is the issue? — andrewnev, Apr 05 '22 at 14:13
Your component will not work never. At least not like this. `this.params` is not defined. — assembler, Apr 05 '22 at 15:00
https://stackoverflow.com/questions/64782949/how-to-pass-params-into-link-using-react-router-v6 I think this might help you. — mc-user, Apr 05 '22 at 15:05

React - Uncaught TypeError: Cannot read properties of undefined (reading 'params')

0 Answers0