If you are wanting to only return one item, I don't see the need for mapping over the entire array. You could try something like this:
renderSlide() {
return <li key={ slides[this.state.slideIndex] } className="animated fadeIn">{ slides[this.state.slideIndex] }</li>
}
A better would be to create a Stateless Functional Component (SFC):
const Slide = (props) => {
return (
<li key={ slides[props.slideIndex] } className="animated fadeIn">{ slides[props.slideIndex] }</li>
);
}
And then call it where you want it to display:
<ul><Slide slideIndex={this.state.slideIndex} /></ul>
By creating <Slide /> as a SCF, you can easily re-use this component elsewhere within the application. For example, if you wanted to show <Next><Current><Previous>, you could do this:
<ul>
<Slide slideIndex={this.state.slideIndex + 1} />
<Slide slideIndex={this.state.slideIndex} />
<Slide slideIndex={this.state.slideIndex - 1} />
</ul>
Hope that helps!