title: Map and Render Data from API in ReactJS (Function Components)
body: <p>I'm learning react. Need to map 5 images from the tinyfac.es API in ReactJS (Function Components). Image is being fetched properly (in console) but unable to render it. If possible, please explain the mistake.
  Thank You So Much :D</p>
  <p>Code:</p>
  <pre><code>import axios from &quot;axios&quot;;
  import React from &quot;react&quot;;
  import { useState, useEffect } from &quot;react&quot;;
  
  let base_url = `https://tinyfac.es/api/data?limit=50&amp;quality=0`;
  
  function Storyslider() {
    const [Containers, setContainers] = useState([]);
    useEffect(() =&gt; {
      axios
        .get(base_url)
        .then((a) =&gt; {
          console.log(a.data[0].url);
          setContainers(a.data.results);
        })
        .catch((b) =&gt; {
          console.log(Error);
        });
    }, []);
    return (
      &lt;div&gt;
        {Containers &amp;&amp;
          Containers.map((Contain, index) =&gt; (
            &lt;img
              src={Contain.data[0].url}
              alt={Contain.data[0].gender}
              key={index}
            /&gt;
          ))}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>export default Storyslider;
  Thank You So Much :D</p>