title: Error: Objects are not valid as a React child (found: object with keys
body: <p>Hi guys if you can help me understand what I'm doing wrong?</p>
  <p>This error notes:</p>
  <pre><code>Error: Objects are not valid as a React child (found: object with keys {id, title, bodyText, icon}). If you meant to render a collection of children, use an array instead.
  </code></pre>
  <p>My code snippet:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  if (cards) {
      const filteredCards = cards.filter((card: { title: string }) =&gt; {
        return card.title.toLowerCase();
      });
      return filteredCards;
    }</code></pre>
  </div>
  </div>
  </p>
  <p>console.log(cards)
  gives:</p>
  <pre><code>cards (4) [{…}, {…}, {…}, {…}]
  </code></pre>
  <p>if I'm using an array there as the error notes, isn't this redundant?</p>
  <p>I'm kind of confused.</p>