Rendering array pictures from calling API in react.js
<p>I have API which consists </p>

<pre><code> "pictures": [
  "http:\/\/storage\/web\/source\/images\/2016-10-28\/edac054f88fd16aee7bc144545fea4b2.jpg",
  "http:\/\/storage\/web\/source\/images\/2016-10-28\/9aa3217f37f714678d758de6f7f5222d.jpg",
  "http:\/\/storage\/web\/source\/images\/2016-10-28\/5164ed92c205dc73a37d77e43fe1a284.jpg"
]
</code></pre>

<p>I have to render these pictures in Carousel. The problem is I have no idea how to render that pictures from an array, means that each picture should be outputted in each slider separately. </p>

<p>That is my code: </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>const API = 'http://...';

export default class Api extends React.Component {  
  constructor(props) {
    super(props)
    this.state = {
      slider_pics:[
        
      ],
    }
  }
  fetchProfile(id) { 
    let url = `${API}${name}`;
    fetch(url)
      .then((res) =&gt; res.json() )
      .then((data) =&gt; {   
        this.setState({
          slider_pics:data.data.pictures,
          
        })
      })
      .catch((error) =&gt; console.log(error) )
  }
  componentDidMount() {
    this.fetchProfile(this.state.name);
  }
  render() {
    return (
    &lt;div&gt; 
      &lt;div&gt;
            &lt;Carousel data={this.state}/&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    )
  }
}</code></pre>
</div>
</div>
</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>export default class Carousel extends React.Component {
    render() {
         let data = this.props.data;
      return(
        &lt;div&gt;
          &lt;React_Boostrap_Carousel animation={true} className="carousel-fade"&gt;
            &lt;div &gt;
              &lt;img style={{height:500,width:"100%"}} src={data.slider_pics} /&gt;
            &lt;/div&gt;
            &lt;div style={{height:500,width:"100%",backgroundColor:"aqua"}}&gt;
              456
            &lt;/div&gt;
            &lt;div style={{height:500,width:"100%",backgroundColor:"lightpink"}}&gt;
              789
            &lt;/div&gt;
          &lt;/React_Boostrap_Carousel&gt;
        &lt;/div&gt;
      )
    }
};</code></pre>
</div>
</div>
</p>

<p>In this code all the URL images are rendering in one slide, I need each picture renders separately in each slide. Please help.</p>