title: How to fix linter expected to return a value at the end of react function component?
body: <p>I create a function component to render error message, but its has a linter warning &quot;Expected to return a value at the end of function 'renderErrorMessage' consistent-return</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>function renderError() {
      if (errors.file) {
        return (
          &lt;Grid item&gt;
            &lt;Grid container direction="column"&gt;
              &lt;Grid item&gt;
                &lt;Text size="14px" height="1.43" isError&gt;
                  Error Data :
                &lt;/Text&gt;
              &lt;/Grid&gt;
              {errors.file.map((message) =&gt; (
                &lt;Grid item key={message}&gt;
                  &lt;Text size="12px" isError&gt;
                    {message}
                  &lt;/Text&gt;
                &lt;/Grid&gt;
              ))}
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        );
      }
  }</code></pre>
  </div>
  </div>
  </p>