title: REACT - show loader spinner by setState inside .map()
body: <p>Got an array on objects from the server.
  Want to display for the user a loader spinner when the request is lodaing.</p>
  <pre><code>const onDownland = (reportId: string) =&gt; {
  
      setDownloadLoadingState(() =&gt; true);
  
      backendAPIAxios.get(`/download/${reportId}`)
      .then((response: AxiosResponse&lt;IDownloadResponse&gt;) =&gt; { 
  
      })
      .catch((e: AxiosError) =&gt; {
      }).finally(() =&gt; {
        setDownloadLoadingState(() =&gt; false);  
      });
    }; 
  </code></pre>
  <p>The problem is I get multiple objects from the server, and I got one state that changes all of the objects UI.</p>
  <pre><code>&lt;Button&gt;
    {!props.downloadLoadingState ?
      &lt;MSvg
        name='download'
        className={classes['svgContainerBlack']} 
        onClick={() =&gt; props.onDownload(history.id!)}
      /&gt; :
    &lt;Tooltip title={&lt;h1 style={{ fontSize: '17px' }}&gt;Loading&lt;/h1&gt;} placement=&quot;left&quot; arrow&gt;
      &lt;CircularProgress color=&quot;inherit&quot; /&gt;
    &lt;/Tooltip&gt;
   }
  &lt;/Button&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/kVFu7.png" rel="nofollow noreferrer">when loading</a></p>
  <p><a href="https://i.stack.imgur.com/rpkl9.png" rel="nofollow noreferrer">after loading</a></p>
  <p>How can I display the loader spinner for each object when I fire the request.</p>
  <p>Added -</p>
  <p><a href="https://i.stack.imgur.com/HxODA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HxODA.png" alt="enter image description here" /></a></p>