Does GridItem need a key attribute to make React happy?

Support
#1

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 https://fedoramagazine.org/cockpit-and-the-evolution-of-the-web-user-interface/

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: https://github.com/linuxlizard/parsnip.git

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.

Screenshot_2019-09-27%20React%20App
Screenshot_2019-09-27 React App.png1745×744 41.4 KB

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!

#2

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:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

you need to add a key={} like:

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

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

#3

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