Navigate back to the homepage

how to get query string value in react js?

Infinitbility
React
June 29th, 2022 · 1 min read
how to get query string value in react js?

Hi 👋,

Welcome To Infinitbility! ❤️

To get the query string value in react js, just use window.location.search it will return the query string and you can use it as you want.

For now, we are taking the query string using window.location.search and converting its parameter into objects.

1const parseParams = (querystring) => {
2 // parse query string
3 const params = new URLSearchParams(querystring);
4
5 const obj = {};
6
7 // iterate over all keys
8 for (const key of params.keys()) {
9 if (params.getAll(key).length > 1) {
10 obj[key] = params.getAll(key);
11 } else {
12 obj[key] = params.get(key);
13 }
14 }
15
16 return obj;
17 };
18// 👇️ {"name":"infinitbility"}
19console.log(parseParams('?name=infinitbility'));
Final Result: Search filter in React

Today, I’m going to show you How do I get query string value in react js, as above mentioned here, I’m going to use the window.location.search and convert it into an object so we can use it when we want.

Let’s start today’s tutorial how do you get query string value in react js?

In this example, we will do

  1. create a sample URL parse function that can convert query string
  2. get query string in useEffect using window.location.search
  3. print created object on a page

Let’s write code…

1import React, { useState, useEffect } from "react";
2import "./styles.css";
3export default function App() {
4 const [queryParam, setQueryParam] = useState({});
5
6 const parseParams = (querystring) => {
7 // parse query string
8 const params = new URLSearchParams(querystring);
9
10 const obj = {};
11
12 // iterate over all keys
13 for (const key of params.keys()) {
14 if (params.getAll(key).length > 1) {
15 obj[key] = params.getAll(key);
16 } else {
17 obj[key] = params.get(key);
18 }
19 }
20
21 return obj;
22 };
23
24 useEffect(() => {
25 let params = parseParams(window.location.search);
26 setQueryParam(params)
27 console.log(params);
28 }, []);
29 return (
30 <div className="App">
31 <h1>{JSON.stringify(queryParam)}</h1>
32 </div>
33 );
34}

As mentioned above, we are taken the example of a sample query string URL, created a function that can convert URL params to objects, and printed output on a screen.

Let’s check the output.

I hope it’s help you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

Get first letter of each word in a string in react js

Get first letter of each word in a string in react js

An example of get first letter of every word from string in react js.

June 28th, 2022 · 1 min read
how to check empty object in react native?

how to check empty object in react native?

An example of check empty object in react native with step by step guide.

June 28th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]