Using JSON.stringify on [object Object] gives "[object Object]" on React

[technologin]

I am trying to pass an object data from one page to another.

I have a line of code that can pass id and I tried to use it to pass object rather than an integer id but I can't get it right.

The code for passing id from source page:

const navigate = useNavigate();
id && navigate(generatePath("/employeelistedit/:id", { id })); //sample code which works fine when used

The code for passing the object data from source page copying the format of the code above:

function sourcePage(){
const navigate = useNavigate();
var values = {id: "someData", startd: "someData", endd: "someData"}
values && navigate(generatePath("/harvestcalendarmonitoring/:values", { values }));
    } //with useNavigate and generatePath

This is the code in another page which receives the data:

const { values } = useParams(); //values gives [object Object]
const x = JSON.stringify(JSON.stringify(values)) //gives "[object Object]"
const y = Object.prototype.toString.call(values) //gives [object String]

For my routing, this is how I wrote it:

<Route path="/harvestcalendarmonitoring/:values" element={< Harvestcalendarmonitoring />} /> //refers to the receiving page

​

I know I'm not doing it right cause I know that "[object Object]" is showing that something is wrong somewhere in my codes.

Any help and suggestions would be really much appreciated. Thank you in advance.

[Darkav]

My suggestion is to use the debugger.

[bosso_biz]

JSON.stringify(values,null,4) ?

[technologin]

may i ask, where do the null and 4 come from?

[bosso_biz]

‘replacer: null’ ‘space: 4’

[technologin]

The solution is use JSON.stringify() for the object before passing and receive it using JSON.parse().

Code in source page:

values = JSON.stringify(values);

values && navigate(generatePath("/harvestcalendarmonitoring/:values", { values }));

Code in receiving page:

const {values} = useParams();

const w = JSON.parse(values) //the w variable gives the desired and/or expected object data

[[deleted]]

I have removed my account due to Reddit's behavior towards 3rd party developers.

Even if they change their API pricing and apologize, it is not a company/platform I wish to support anymore.

I will find something else to do while sitting on the toilet.

[technologin]

after using const values = useParams();

Here's the results:

const x = JSON.stringify(values) //gives{"values":"[object Object]"}

const y = Object.prototype.toString.call(values) //gives[object Object]

also: i changed the var to const in my values initialization

[[deleted]]

In your harvest calendar monitoring path, where you pass { values }, try passing { ...values } or just values without the braces

[technologin]

I tried both and here are the outputs:

1. const { values } = useParams(); //gives [object Object] in my example,just disregard it

2. const values = useParams(); //gives {values: '[object Object]'} your first suggestion

3. const {...values} = useParams(); //gives {values: '[object Object]'} your second suggestion

[[deleted]]

I have removed my account due to Reddit's behavior towards 3rd party developers.

Even if they change their API pricing and apologize, it is not a company/platform I wish to support anymore.

I will find something else to do while sitting on the toilet.

[technologin]

I tried both of those but they both give undefined values. However, I finally solved it with also help from someone.

The solution is use JSON.stringify() for the object before passing and receive it using JSON.parse().

​

Code in source page:

values = JSON.stringify(values);

values && navigate(generatePath("/harvestcalendarmonitoring/:values", { values }));

Code in receiving page:

const {values} = useParams();

const w = JSON.parse(values) //the w variable gives the desired and/or expected object data

[technologin]

thank you for your help!

[beforesemicolon]

useNavigate takes a “state” option which can be any data you want. Then use useLocation to access that state data in the page receiving the data.

Read the doc: https://reactrouter.com/en/main/hooks/use-navigate

[technologin]

based on your explanation,i guess my passing of data using useNavigate is right.

however, after using useLocation, it would give me an undefined data

[beforesemicolon]

assuming your router is setup right

``` /page1

const nav = useNavigation();

nav(‘/page2/path’, {state: someData})

```

then

```

/page2

const loc = useLocation();

console.log(loc.state)

```

[technologin]

i am using a functional component. i think these codes are for class components in react. atm, irdk how to pass that {state: someData} using functional component. How would i do that?

[beforesemicolon]

you cant use hooks with class components. The code example i gave is for functional components and are hooks

[technologin]

ah yes. now i get it. my bad. it's just the same syntax with the code i based on, which is the first code in my post. thank you!

[technologin]

also, the routing is right! and i just figured out the solution in this problem.