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

Question

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.

Steve Hynding · Accepted Answer · 2022-09-16 19:46:58Z

2

It looks like you missed the stringify step:

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

However, make sure generatePath is also URL encoding this string values or else you will likely have an invalid URL.

When it comes time to parsing the string back into an object, be sure to call JSON.parse

answered Sep 16, 2022 at 19:46

Steve Hynding

1,8691 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

technologic Over a year ago

the stringify works and i need to receive it with JSON.parse() in the receiving page. thank you!

technologic · Accepted Answer · 2022-09-17 13:03:48Z

1

With the help of Steve through his comment above/below this comment, 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

answered Sep 17, 2022 at 13:03

technologic

517 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related