title: How to fetch multiple API using typescript in reactjs?
body: <p>I have a list of urls, I want to fetch all of them and to return the images found in all these APIs so I can render it in react component using react-responsive-masonry. I have made my function in javascript but I am not sure how to write it in typescript and also I don't know how to render it in my component.
  Here's my function</p>
  <pre><code>var photos_info = [];
  async function get_photos(urls) {
    var promises = urls.map((url) =&gt; fetch(url).then((y) =&gt; y.json()));
    await Promise.all(promises).then((results) =&gt; {
      photos_info = results;
      return photos_info;
    });
  
    return photos_info;
  }
  </code></pre>
  <p>I want to render it in src in my component</p>
  <pre><code>&lt;ResponsiveMasonry columnsCountBreakPoints={columnsCountBreakPoints}&gt;
        &lt;Masonry gutter={4}&gt;
          {
            &lt;img src={} /&gt;
          }
        &lt;/Masonry&gt;
      &lt;/ResponsiveMasonry&gt;
  </code></pre>
  <p><strong>Edit</strong>
  Another method using <strong>useState and useEffect</strong></p>
  <pre><code>const [photosList, setPhotosList] = useState&lt;any&gt;();
    useEffect(() =&gt; {
      const photosPromises = urls.map((url) =&gt;
        fetch(url).then((res) =&gt; res.json())
      );
      Promise.all(photosPromises).then((data) =&gt; {
        setPhotosList(data);
      });
    }, []);
    console.log(&quot;hi&quot;, photosList);
  </code></pre>
  <p>I tried to render a simple one just to see what is inside</p>
  <pre><code> &lt;div&gt;
        {photosList.map((photo: any) =&gt; {
          return &lt;pre&gt;{JSON.stringify(photo)}&lt;/pre&gt;;
        })}
      &lt;/div&gt;
  </code></pre>
  <p>but it gives me this error <strong>Cannot read property 'map' of undefined</strong></p>