title: Trouble with fetch error handling in Reactjs
body: <p>I'm learning how to use fetch and was trying the following syntax:</p>
  <pre><code>const [stuff, setStuff] = useState([]);
  const request = &quot;link-to-API&quot;;
  
  const data = await fetch(request)
      .then(response =&gt; response.json())
      .catch(err =&gt; {
        console.log(err);
        return {} //(or [], or an empty return, or any return at all)
      })
  
  setStuff(data.hits)
  </code></pre>
  <p>Then, in the return, I have:</p>
  <pre><code>{stuff.map((element) =&gt; (
          &lt;Thing
            title={element.label}
            link={element.url}
          /&gt;
        ))}
  </code></pre>
  <p>Thinking I could just render an empty object whenever my fetch fails. Except, this works only when the fetch itself works. React gives me the error</p>
  <blockquote>
  <p>&quot;Objects are not valid as a React child (found: TypeError: Failed to
  fetch).&quot;</p>
  </blockquote>
  <p>But I can't find any solution online. How could I handle the errors just by not rendering anything?
  (that's not the only part I'm rendering, I just want to render an empty div, not conditionally render that part)</p>