Does GridItem need a key attribute to make React happy?

Hello. I’m brand new to modern front end coding. Usually I wander around in kernel or userspace doing C/C++/Python. I found Patternfly through

I’m going through the books React in Action and Redux in Action. The Redux book uses a to-do app called Parsnip. I decided to use Patternfly for the UI while going through the book.

Here’s the little project I’m working on:

My long-term goal is a web front end to a back-end wifi scanner. I have a super simple prototype running with Flask as the back end.

End of introduction, now a quick question. :slightly_smiling_face:

I’m using a Grid + GridItem to lay out a simple to-do app with a “new task” form. React gave me the “array items need key attribute” error which I tracked down to needing a key on each GridItem. Is that correct or did I goof something else?

Thanks for patternfly-react!

Hey linuxlizard,

Awesome to hear from you! In React siblings must have unique keys. So yes, each sibling GridItem must have a unique key defined.

This example will throw the error:


you need to add a key={} like:

  <li key="1">1</li>
  <li key="2">2</li>
  <li key="3">3</li>
  <li key="4">4</li>

You can read all about keys on React’s site.

Thanks! I’m sure I’ll be back with more questions as I climb the learning curve. :slight_smile: