Jake

Code & Coffee

Sep 27, 2018

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!

<p>Hey Jake, thanks for your help. I just want to give an update, and sorry for the long delay (I took a few days off).</p> So, I found the problem. It wasn't the method renderSlides() that's the issue, it was actually due to the fact that state = { slideContents: [] } was empty to begin with. I used componentDidMount() to populate this.state.slideContents and it works as intended now. See below<br />

import _ from 'lodash'
import React, { Component } from 'react'

import './Carousel.css'

class carousel extends Component {
 state = {
  slideContents: [],
  slideIndex: 0
 }

 componentDidMount() {
  this.setState({slideContents: ['content 1', 'content 2', 'content 3']})
 }

 onNextSlide = () => {
  const c = `${Date.now()}`
  this.setState({ slideIndex: this.state.slideIndex + 1 })
  this.setState({ slideContents: [ ...this.state.slideContents,  c ]});
 }

 onPreviousSlide(slide) {
  this.setState({ slideContents: _.without(this.state.slideContents, slide) });
 }

 renderSlides() {
  const slides = this.state.slideContents.map((item, index) => {
   return (
    <li key={item} className="animated fadeIn">{ item }</li>
   )
  })

  const i = this.state.slideIndex

  return slides[i]
 }

 // renderSlides() {
 //  return <li key={ slides[this.state.slideIndex] } className="animated fadeIn">{ slides[this.state.slideIndex] }</li>
 // }


 render() {
  return (
   <div>
     <h1>carousel works!</h1>
     <button onClick={this.onNextSlide}>next</button>
     <ul>{this.renderSlides()}</ul>
   </div>
  )
 }
}



export default carousel

Lesson learned: taking a break after coding for many hours per day is more productive than not having breaks at all :)

Search Hashnode