title: Do React console warnings need to be dealt with before deploying?
body: <p>I've been learning to code for about 3 months now and I've gotten pretty far with an APP I created but when I inspect the page, I have over 50 warnings. Here are some of the warnings</p>
  <blockquote>
  <p>react-dom.development.js:67 Warning: Text content did not match. Server: &quot;Sign out&quot; Client: &quot;Create&quot;
  at a
  at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:148896:19599)
  at Link (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:89219:19)
  <em><strong>THERE ARE BOUT 10 LINKS SIMILAR TO THE ONES ABOVE THAT FOLLOW</strong></em></p>
  <p>VM2101 react_devtools_backend.js:3973 Warning: Each child in a list
  should have a unique &quot;key&quot; prop.</p>
  <p>Check the render method of <code>AllAssets</code>. See
  <a href="https://reactjs.org/link/warning-keys" rel="nofollow noreferrer">https://reactjs.org/link/warning-keys</a> for more information.
  at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:148896:19599)
  at AllAssets (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1647879270456:40:73)
  <em><strong>THERE ARE BOUT 10 LINKS SIMILAR TO THE ONES ABOVE THAT FOLLOW</strong></em></p>
  <p>VM2101 react_devtools_backend.js:3973 Warning: The tag  is
  unrecognized in this browser. If you meant to render a React
  component, start its name with an uppercase letter.
  at image
  at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:148896:19599)
  at span
  at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:148896:19599)
  <em><strong>THERE ARE BOUT 10 LINKS SIMILAR TO THE ONES ABOVE THAT FOLLOW</strong></em></p>
  </blockquote>
  <p>These equal out to about 100 lines of errors all seeming to be referring to the same issues. To be honest, I don't really know how to address tese. Like for example, the one that sasys that all child lists should have a key prop. I'm pretty sure it's referring to some instances where I have the following:</p>
  <pre><code>return (
      &lt;ul&gt;
        {assets.map((result) =&gt; {
          const {
            collection: { name },
            data: { image },
          } = result;
  
          if (name !== null) {
            return (
              &lt;Container&gt;
                &lt;Card key={name}&gt;
                  &lt;CollectionAvatar
                    image={image}
                    /*name={name || collection}*/
                    type=&quot;collection&quot;
                  /&gt;
                  &lt;br&gt;&lt;/br&gt;
                  &lt;br&gt;&lt;/br&gt;
                  {name}
                &lt;/Card&gt;
              &lt;/Container&gt;
            );
          }
        })}
      &lt;/ul&gt;
    );
  }
  </code></pre>
  <p>You see, I added a key, but I don't really know if that's the right way to do it or if I added the wrong key etc. I'm still learning about this.</p>
  <p>Typing this up I realize that I have a few questions:</p>
  <ol>
  <li>Are the errors that I have shown critical? Do they need to be fixed before deploying?</li>
  <li>Is there anyway to hide these in the meantime if they are not critical so that I can fix them at a later time?</li>
  <li>How can I find out what the error is talking about. I see a link but I don't understand what the result is showing me.</li>
  </ol>
  <p>Thanks for you patience. Like I said, I'm learning and I realize I still have a lot to learn but I'd appreciate some clarity on this!</p>