I'm trying to pass objects of an array in another page using router.query, single objects such as router.query.title work fine, but when it comes to arrays such as router.query.reviews it returns something like this reviews: ['', '', '', '', '', '', '', '']. I've tried using router.isReady but nothing seems to change
Example object in the array
{
title: "Center-Hall",
reviews: [
{
title: "Wislong Chew",
comment: "jsdncjnsd csdncjds csjcnsdj csjdcn cdc djndc",
},
{
title: "Wisdsdlong Chew",
comment: "jsdncjnsd csdncjds csjcnsdj csjdcn cdc djndc",
},
],
},
Parent
{array.map((item) => (
<Grid key={item} item>
<Card
label={item.title}
onClick={() =>
router.push({
pathname: "/page",
query: {
title: item.title,
reviews: item.reviews,
},
})
}
/>
</Grid>
))}
Next Page
function index() {
const router = useRouter();
useEffect(() => {
if (!router.isReady) return;
console.log(router.query);
}, [router.isReady]);
const Reviews = () =>
<ReviewCard
reviewsList={router.query.reviews}
/>
);
return (
<Box>
<Typography>{router.query.title}</Typography>
<Reviews />
</Box>
);
}
export default index;
When you passing an array using router.query to another page parse it into a json string using the JSON.stringify method and on the next page parse the string into an array using the JSON.parse method
{array.map((item) => (
<Grid key={item} item>
<Card
label={item.title}
onClick={() =>
router.push({
pathname: "/page",
query: {
title: item.title,
reviews: JSON.stringify(item.reviews),
},
})
}
/>
</Grid>
))}function index() {
const router = useRouter();
useEffect(() => {
if (!router.isReady) return;
console.log(router.query);
console.log(JSON.parse(router.query.reviews))
}, [router.isReady]);
const Reviews = () =>
<ReviewCard
reviewsList={JSON.parse(router.query.reviews)}
/>
);
return (
<Box>
<Typography>{router.query.title}</Typography>
<Reviews />
</Box>
);
}
export default index;It happens when the array item is a JSON object.You can pass array but not array of objects.
router.push({
pathname: "/planterupdate",
query: {
title: "test",
textArray: ["1","2","3","4"],//will work
reviews: [{num:1},{num:2},{num:3},{num:4}],//will not work
numArray: [5,6,7,8],//will work
},
})
Sample log of query {title: 'test', textArray: Array(4), reviews: Array(4), numArray: Array(4)} numArray: (4) ['5', '6', '7', '8'] reviews: (4) ['', '', '', ''] textArray: (4) ['1', '2', '3', '4'] title: "test"