Get help on Discord

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 the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?