Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

How to create a unique key for a static list in Gatsby using React and GraphQL

15 replies
Last updated: Jun 17, 2021
I have an 
Array
currently which i query from graphql, and then I map it into a 
<li>
in Gatsby. However, React throws the missing 
key
error. I have no unique key within my 
Array
. How should I go about working around this? Do I create an object with two key value pairs, one that has an 
id
and the other with my 
Array
?
Jun 17, 2021, 3:21 AM
user R
normally in react, if you don’t have an ID you can just use the 
index
to do something like this:

return (
  <ul>
    {items.map((item, index) => (
      <li key={`item_${index}`}>{item}</li>
    ))}
  </ul>
)
NOTE - this is not a good solution if you expect your list of items to change dynamically at runtime
Jun 17, 2021, 3:30 AM
great thanks! It's a static list and will only change if i rebuild the site.
Jun 17, 2021, 3:39 AM
user R
cool - you won’t have any issues using that method then 👍
Jun 17, 2021, 3:40 AM
great thanks! It's a static list and will only change if i rebuild the site.
Jun 17, 2021, 3:39 AM
as the internet will tell you, using index as keys in react is usually not the best idea
The only thing the key actually needs to do is to be unique, and sanity usually provides a unique key or id field for all the array points, I tend to use them as my keys
Jun 17, 2021, 7:09 AM
That's whats been bugging me. I dont seem to have a unique key or id field for my array and I dont know how to create it at the moment either
Jun 17, 2021, 7:35 AM
and here's my schema

    {
      name: 'info',
      title: 'Gist of product',
      description: 'Allows for a gist to be displayed on main product page',
      type: 'array',
      of: [
        {
          type: 'string',
        },
      ],
    },
Jun 17, 2021, 7:38 AM
There are some properties with an underscore prefixed such as 
_id _key
on the left pane of your Graphi interface. These should be what you're looking for 👌
Jun 17, 2021, 8:36 AM
user V
wouldnt these be unique to the 
Document
itself? What happens when I have another array within my 
Document
?
Jun 17, 2021, 11:41 AM
I assume 
_id
will be for each item of the array
Jun 17, 2021, 11:44 AM
ill give it a shot. i assumed the 
_id
was for the document
Jun 17, 2021, 11:54 AM
thanks
Jun 17, 2021, 11:54 AM
ill give it a shot. i assumed the 
_id
was for the document
Jun 17, 2021, 11:54 AM
I could be wrong 😄 give it a go anyway
Jun 17, 2021, 11:55 AM
I thought you wanted an unique id for each 
info
item. But looks like you want a unique id for each string element inside 
info
. If you know each string in the array will be unique in the list you could generate an id from that instead.
Jun 17, 2021, 12:34 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?