How to map over nested arrays to output link urls in React
7 replies
Last updated: Dec 9, 2022
Z
I have a query returning:
I'm able to display the title "Browse" with
But I want to use navigationItemUrl's "text" in a map to output link urls.
How might I go about this?
0:{…} 8 properties
_createdAt:2022-12-07T23:19:09Z
_id:navigation
_rev:Bp455s9rtQ49wRO6vY4ZPz
_type:navigation
_updatedAt:2022-12-08T21:58:33Z
items:[…] 1 item
0:{…} 4 properties
_key:7f41faf793a8
_type:navigationItem
navigationItemUrl:{…} 2 properties
_type:link
internalLink:{…} 2 properties
text:login
navId:{…} 2 properties
_type:slug
current:mainMenu
title:Browse{navs.map((navs: any) => (
<div key={navs._id}>{navs.title}</div>
))}How might I go about this?
Dec 8, 2022, 11:59 PM
Z
Ok, update!
I have gotten the "text" ("login") to show up in the link this way:
{navs.map((navs: any) => (
<div key={navs._id}>
<a href={
))}
But I've added another item:
And I want to have the map output them both... What do I do?
I have gotten the "text" ("login") to show up in the link this way:
{navs.map((navs: any) => (
<div key={navs._id}>
<a href={
/${navs.items[0].text}}>TEXT</a> </div>))}
But I've added another item:
0:{…} 8 properties
_createdAt:2022-12-07T23:19:09Z
_id:navigation
_rev:cwf6PSmkIH3MXtFHyvxJDS
_type:navigation
_updatedAt:2022-12-09T00:18:00Z
items:[…] 2 items
0:{…} 4 properties
_key:7f41faf793a8
_type:navigationItem
navigationItemUrl:{…} 2 properties
_type:link
internalLink:{…} 2 properties
_ref:783ff653-fa25-4caa-ad69-dcf78dcaa970
_type:reference
text:login
1:{…} 4 properties
_key:85a628a4890b
_type:navigationItem
navigationItemUrl:{…} 2 properties
_type:link
internalLink:{…} 2 properties
_ref:b4d875e5-798e-401f-ac30-8b4ad96ecb82
_type:reference
text:blog
navId:{…} 2 properties
_type:slug
current:mainMenu
title:BrowseDec 9, 2022, 12:25 AM
You’ll want to map over that
itemsarray. I may have made up a
_keyvalue that’s not in your content, but perhaps something like:
{navs.map((nav) => (
<div key={nav._id}>
{nav.items.map((item) => (
<a key={item._key} href={`/${item.text}`}>TEXT</a>
))}
</div>
))}Dec 9, 2022, 12:40 AM
Z
user A
Ok, let me try that - I'll get back to youDec 9, 2022, 12:41 AM
Z
user A
It works! YOU'RE BRILLIANT!!!!Dec 9, 2022, 12:42 AM
Z
Side note... so many maps... Is this normal?
Dec 9, 2022, 12:43 AM
Yes, if you have an array nested in an array, you’ll need to map over both. Depending on your setup you may want to add some guards (for example, what happens if
itemsis empty? What if
navsis empty?), but otherwise this should be fine and is completely typical.
Dec 9, 2022, 12:59 AM
Z
user A
Brilliant, thank you!Dec 9, 2022, 1:09 AM
Sanity– build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.