From e3c39bd2fa84b1d78ac4caed4953d8e651bc5415 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 12 Mar 2019 20:56:50 -0700
Subject: [PATCH 1/2] fix: make each emoji category into a list

---
 css/emoji-mart.css         | 12 ++++++++++++
 src/components/category.js |  9 +++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index d2e4a65..c8d28f9 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -160,6 +160,18 @@
   background-color: rgba(255, 255, 255, .95);
 }
 
+.emoji-mart-category-list {
+  margin: 0;
+  padding: 0;
+}
+
+.emoji-mart-category-list li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}
+
 .emoji-mart-emoji {
   position: relative;
   display: inline-block;
diff --git a/src/components/category.js b/src/components/category.js
index 21556ca..71f6c0e 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -195,10 +195,15 @@ export default class Category extends React.Component {
           </span>
         </div>
 
+        <ul className="emoji-mart-category-list">
         {emojis &&
-          emojis.map((emoji) =>
-            NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps }),
+          emojis.map((emoji) => (
+              <li>
+                {NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps })}
+              </li>
+            )
           )}
+        </ul>
 
         {emojis &&
           !emojis.length && (

From f98526a7ed9c90eac0db4f91ee4e0acb7d3b7b72 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 12 Mar 2019 23:15:53 -0700
Subject: [PATCH 2/2] ensure every <li> has a key

---
 src/components/category.js           | 2 +-
 src/components/emoji/nimble-emoji.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/category.js b/src/components/category.js
index 71f6c0e..4368c11 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -198,7 +198,7 @@ export default class Category extends React.Component {
         <ul className="emoji-mart-category-list">
         {emojis &&
           emojis.map((emoji) => (
-              <li>
+              <li key={emoji.id || emoji}>
                 {NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps })}
               </li>
             )
diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
index 23ad4cd..13f6017 100644
--- a/src/components/emoji/nimble-emoji.js
+++ b/src/components/emoji/nimble-emoji.js
@@ -185,7 +185,6 @@ const NimbleEmoji = (props) => {
   } else {
     return (
       <button
-        key={props.emoji.id || props.emoji}
         onClick={(e) => _handleClick(e, props)}
         onMouseEnter={(e) => _handleOver(e, props)}
         onMouseLeave={(e) => _handleLeave(e, props)}