title: get next Next/Previous item in array using react
body: <p>I'm new to react and programming in general, I have searched and only found solutions for js not react specific.</p>
  
  <p>Having trouble displaying next or previous item in an array passed via props. When Next button is clicked I only see the same item in the array being returned not the next item, I understand previous will return null as displaying first item on load.</p>
  
  <pre><code>import React, { Component } from 'react'
  import VideoPlayer from './Video'
  import axios from 'axios'
  
  export default class App extends Component {
  constructor(props) {
  super(props);
  
  this._TogglePrev = this._TogglePrev.bind(this);
  this._ToggleNext = this._ToggleNext.bind(this);
  
  // app state
  this.state = {
  videos: [],
  selectedVideo: null
   }
  }
  
  componentDidMount() {
     axios.get('http://localhost:5000/v1/video?id=287948764917205')
     .then((result)=&gt; {
       var videos = result.data.payload
       this.setState({
         videos: videos,
         selectedVideo: videos[0]
       });
     })
   }
  
  componentWillUnmount() {
   this.serverRequest.abort()
   }
  
  // State transitions
    _ToggleNext() {
      console.log("something worked");
      // take a copy of our state
      const selectedVideo = this.state.selectedVideo;
      // next video
      var i = 0,
      max = selectedVideo.length;
      for (i; i &lt; max; i += 1) {
          if (selectedVideo[i]) {
              return selectedVideo[i + 1];
          }
      }
      //set our state
      this.setState( selectedVideo );
      console.log(selectedVideo)
    }
  
    _TogglePrev() {
      console.log("something worked");
      var current = this.state.selectedVideo;
      var prev = current - 1;
      if (prev &lt; 0) {
        prev = this.state.videos.length - 1;
      }
      // update our state
      this.setState({ prev });
    }
  
   render() {
    return (
       &lt;div className="App" style={{width: '100%', height: '100%'}}&gt;
         &lt;div className="controls"&gt;
           &lt;button className="toggle toggle--prev" onClick={this._TogglePrev}&gt;Prev&lt;/button&gt;
           &lt;button className="toggle toggle--next" onClick={this._ToggleNext}&gt;Next&lt;/button&gt;
         &lt;/div&gt;
          &lt;VideoPlayer video={this.state.selectedVideo} /&gt;
       &lt;/div&gt;
    )
   }
  }
  </code></pre>
  
  <p>The returned data</p>
  
  <pre><code>[
   {  eventId: "287948764917205"
    userName: "Jon Doe"
    videoLink: "https://"https:s3.amazonaws.com/...""
    userPhotoLink: "https://"https:s3.amazonaws.com/...""
   },
   { eventId: "287948764917205"
   userName: "Jane Thompson"
   videoLink: "https://"https:s3.amazonaws.com/...""
   userPhotoLink: "https://"https:s3.amazonaws.com/...""
   }  
  ]
  </code></pre>