✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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.

Was this answer helpful?