title: Unable to render automatic slideshow with react
body: <p>I'm trying to create an automatic slideshow in react, using <a href="https://github.com/andela-foladeji/react-slideshow" rel="nofollow noreferrer">react-slideshow</a>. I'm very new to react and have just begun. I got this code from <a href="https://www.npmjs.com/package/react-slideshow-image" rel="nofollow noreferrer">here</a>.</p>
  
  <pre><code>import React from 'react';
  import { Fade } from 'react-slideshow-image';
  const images = [
    './img/p1.png',
    './img/p1.png',
    './img/p1.png'
  ];
  
  const Slideshow = () =&gt; {
  return (
      &lt;Fade
        images={images}
        duration="5000"
        transitionDuration="1000"/&gt;
     )
  }
  </code></pre>
  
  <p>What I am not getting is how to make this slideshow actually render. What I have done is called this function from inside a component in the same file i.e.</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
        {Slideshow();}
      &lt;/div&gt;
      );
    }
  }
  export default App;
  </code></pre>
  
  <p>This is not rendering any slideshow or image, about which I'm not too surprised. The function is running. I console logged something and it got logged on the console. The rest of the page (I have other divs not shown here) is rendered and there is no error thrown. How to make this work?</p>