Solving the undefined Issue in React + Express.js URL Parameters

Learn how to fix the `undefined` error you're encountering when passing URL parameters from React to an Express.js backend.
---
This video is based on the question stackoverflow.com/q/66127602/ asked by the user 'pikachungg' ( stackoverflow.com/u/11853126/ ) and on the answer stackoverflow.com/a/66127744/ provided by the user 'ousecTic' ( stackoverflow.com/u/10541061/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React + Expressjs URL params returning undefined on get request

Also, Content (except music) licensed under CC BY-SA meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction

If you're building a web application using React for the front end and Express.js for the back end, you might run into some challenges with URL parameters. One common issue developers face is when their parameters return as undefined upon making a GET request. In this guide, we'll investigate this problem and explore how to solve it to ensure you can easily retrieve user information from your back-end server.

Problem Overview

Imagine you have a button on your frontend app that, when clicked, sends a request to your Express.js back end to retrieve user data based on their username. However, when you use your function to handle the request, the value of username is coming back as undefined. This can be puzzling, especially when accessing the URL directly in your browser works perfectly fine.

Let’s look at the code snippets provided to understand the situation better.

Example Code Snippet

Here’s the snippet of the onClick function:

[[See Video to Reveal this Text or Code Snippet]]

And the Express.js server handling the request is as follows:

[[See Video to Reveal this Text or Code Snippet]]

As you can see, when the button is clicked, the console logs the user as undefined, but directly accessing the URL with a proper query string works fine.

Solution: Fixing the URL and Fetch Call

Now, let’s address the issue step-by-step.

Step 1: Correct the Protocol in the URL

The primary issue here lies in the URL you're using in your front-end function. You have mistakenly included https:// and http:// together, which is incorrect. You only need to specify http://.

Updated Code Snippet

Here’s the corrected version of your getBackend function:

[[See Video to Reveal this Text or Code Snippet]]

By changing https://http://localhost:4000/backend to just http://localhost:4000/backend, you'll resolve the undefined error.

Step 2: Ensure Proper Fetch Implementation

In the fetch method, specify the URL using the corrected variable directly. This way, the request knows where to look for the backend resource. Ensure you're using url as shown above instead of a hard-coded string.

Conclusion

In summary, the reason you're encountering the undefined issue for your URL parameters in React and Express.js is due to a mistake in the URL formatting. By correcting the protocol from https and http to just http, and ensuring your fetch request uses the correct url, you can successfully retrieve the user information from the Express.js server.

Now, you can confidently handle user information in your web application without running into undefined errors when using URL parameters. Happy coding!