title: Display an error message when API is not working
body: <p>I have table data where I'm fetching that data through API. I need to display an error message on the user screen like  <code>something went wrong</code> message</p>
  <p>I tried the below code</p>
  <pre class="lang-js prettyprint-override"><code>const File history = () =&gt; {
     const [tableData, setTableData] = useState([]);
     const [isVisible, setIsVisible] = useState(true);
     const [errorMessage, setErrorMessage] = useState('');
     const getFileHistoryData = async() =&gt; {
      try {
        const response = await axios.get(&quot;api&quot;);
        const data = await response.data;
        if (data.length &gt; 0) {
          setTableData(response.data);
        }
      } catch (e) {
        console.log(e.message)
      }
    };
    const renderErrorMessage = () =&gt; {
      return(
        &lt;div&gt;
           {errorMessage !- &amp; (
               &lt;h1&gt;{'Something went wrong: + errorMessage}&lt;/h1&gt;
           }}
        &lt;/div&gt;
      )
  }
    return (
        &lt;div&gt;
           {this.renderErrorMessage()}
           &lt;MyTableComponent/&gt;
        &lt;/div&gt;  
       );
  }
  </code></pre>
  <p>How do I display the error in the frontend render the message since it's a functional component?</p>