Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[gatsby-starter-blog-theme] Clean up react keys warning

See original GitHub issue

A new project instantiated using gatsby-starter-blog-theme currently displays the following error:

Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <body>. See https://fb.me/react-warning-keys for more information.
    in EmotionCssPropInternal

Need to investigate and clean this up

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:6 (4 by maintainers)

Top GitHub Comments

2reactions

GerardKetumacommented, Aug 20, 2021

I know this is an old thread, but I just started experiencing this error warning as soon as I added an array of two scripts to onRenderBody’s setPostBodyComponents in gatsby-ssr.js

I’m using Gatsby v3.8.1

You have to ensure the script tags have a key prop as well. So do something like this: <script key="my-script" src="https://gatsby.dev/my-script" />

1reaction

brotzkycommented, Aug 15, 2019

Hey, on v0.2.23 I’m getting a similar error

Check the top-level render call using <body>. See https://fb.me/react-warning-keys for more information. in InitializeColorMode

Do you think this is still theme-ui related? (referenced issue above #55)

Top Results From Across the Web

Getting key prop warning in React, even though key is set

I'm getting this warning: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of...

Lists and Keys - React

When you run this code, you'll be given a warning that a key should be provided for list items. ... Most often you...

Warning: Each Child in a List Should Have a Unique 'key' Prop

If the key is an index, reordering an item in the array changes it. Then React will get confused and re-render the incorrect...

Everything you need to know about the key prop in React

NOTE: effect cleanup actually happens after the new component has been mounted, but before the next effect callback is run. For class components ......

8 common React error messages and how to address them

However, it's also common to receive a React warning in your browser's console saying that every child in a list should have a...