Merge pull request #473 from GetStream/fix/reaction-list-fix

Only render <SimpleReactionList /> if there are reactions
GetStream · Jul 27, 2020 · f8a3878 · f8a3878
2 parents 84bf438 + 2a62682
commit f8a3878
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/components/Reactions/SimpleReactionsList.js b/src/components/Reactions/SimpleReactionsList.js
@@ -14,6 +14,10 @@ const SimpleReactionsList = ({
 }) => {
   const [tooltipReactionType, setTooltipReactionType] = useState(null);
 
+  if (!reactions || reactions.length === 0) {
+    return null;
+  }
+
   /** @param {string | null} type */
   const getUsersPerReactionType = (type) =>
     reactions

diff --git a/src/components/Reactions/__tests__/SimpleReactionsList.test.js b/src/components/Reactions/__tests__/SimpleReactionsList.test.js
@@ -48,6 +48,13 @@ const expectEmojiToHaveBeenRendered = (id) => {
 describe('SimpleReactionsList', () => {
   afterEach(jest.clearAllMocks);
 
+  it('should not render anything if there are no reactions', () => {
+    const { container } = renderComponent({
+      reaction_counts: {},
+    });
+    expect(container).toBeEmptyDOMElement();
+  });
+
   it('should render the total reaction count', () => {
     const { getByText } = renderComponent({
       reaction_counts: {