How to pass this.props.match.params.id across to serverless function for database query from React web app

Question

I've got a React front-end, with an Axios GET call. Within this get call, I am attempting to pass in 'this.props.match.params.id' at the end.

With this 'this.props.match.params.id', I am attempting to use it on my serverless function to query my MongoDB Database with a 'findById' function.

However, whenever I add 'this.props.match.params.id' on to the end (like below), the function doesn't fire. If I remove it, the function does fire, but returns undefined.

If I try 'req.params.id' instead, it returns an error of 'id not defined'.

For reference - the URL successfully updates when I click on the 'edit' link to pull the ID in. If I also console 'this.props.match.params.id', it returns the correct ID within my Axios call.

How do I pass 'this.props.match.params.id' across to my serverless function, and use it to query my database through 'findById'?

Here's my code:

My serverless function

module.exports = async (req, res) => {

  console.log(req.params);

  let fetchEditDebts = await SubmitDebt.findById(req.params);
  return res.status(200).json(fetchEditDebts);

};

My Axios get call in React code with this.props.match.params.id:

componentDidMount() {
    axios.get("/api/fetchEditDebt", { params: { id: this.props.match.params.id } })
      .then((response) => {
        console.log(response)
      })
      .catch((error) => {
        if (error.response) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          console.log(error.request);
        } else {
          console.log('Error', error.message);
        }
          console.log(error.config);
        })
      }

And my Axios call without this.props.match.params.id:

componentDidMount() {
    axios.get("/api/fetchEditDebt")
      .then((response) => {
        console.log(response)
      })
      .catch((error) => {
        if (error.response) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          console.log(error.request);
        } else {
          console.log('Error', error.message);
        }
          console.log(error.config);
        })
      }

Any hints / tips would be much appreciated. Please let me know if you need any more detail.

EDIT: I've tried the answer below (and edited my code to reflect.. But am now getting an error message of 'id not defined'. As follows:

2020-10-23T15:51:44.222Z    39718d37-7a13-4240-a01c-90030916edf8    ERROR   Unhandled Promise Rejection     {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"TypeError: Cannot read property 'id' of undefined","reason":{"errorType":"TypeError","errorMessage":"Cannot read property 'id' of undefined","stack":["TypeError: Cannot read property 'id' of undefined","    at module.exports (/var/task/api/fetchEditDebt.js:12:28)","    at Server.<anonymous> (/var/task/___now_helpers.js:813:19)","    at Server.emit (events.js:315:20)","    at parserOnIncoming (_http_server.js:790:12)","    at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: TypeError: Cannot read property 'id' of undefined","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:327:22)","    at processPromiseRejections (internal/process/promises.js:209:33)","    at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}
Unknown application error occurred

My route with React Router:

import EditDebt from './components/edit-debt/edit-debt';

function App() {
  return (
    <Switch>
    <Route path="/edit/:id" component={EditDebt} />
    </Switch>

Answer 1

That's not the best way to send a get request, when sending a get request the params should be send in the url, right now you are concating the url to a variable so the serveless function it's not getting the id, get the change below:

axios.get("/api/fetchEditDebt",{ params: { id: this.props.match.params.id } })

That will be equivalent to /api/fetchEditDebt?id=sent_id

So the serveless function now gets params.id:

module.exports = async (req, res) => {

  console.log(req.params.id);

  let fetchEditDebts = await SubmitDebt.findById(req.params.id);
  return res.status(200).json(fetchEditDebts);

};

Best regards