<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 :)

<p>Thanks Stephan de Vries. There are some golden-nuggets in your reply. I really appreciate it. </p> <p>I <em>have</em> tried a plethora of ways to force my Slide.js to re-trigger animations but did not do justice, including passing props to the className attribute -- while yes, the Slide component re-renders, the animation props being passed in still doesn't render the effect for some odd reason. </p> <p>I even tried using my own CSS animation with different class names but does (supposedly) the same thing -- passed those class names alternately every other pass-through as props -- but results to the same dead outcome.</p> <p>I even changed the State names (from 'effect' to 'animation' vice versa), like it matters but for the heck of it, why not. </p> <p>My console log looked something like below: (I guess we can't reply with images??)<br /> prevProps.animation fade-in1 Slide.js:42<br /> prevProps.animation fade-in2 Slide.js:42<br /> prevProps.animation fade-in1 Slide.js:42<br /> prevProps.animation fade-in2 Slide.js:42<br /> prevProps.animation fade-in1 Slide.js:42<br /> prevProps.animation fade-in2 Slide.js:42<br /> prevProps.animation fade-in1 Slide.js:42<br /> prevProps.animation fade-in2 Slide.js:42<br /></p> <p><br />Lastly for now, there is this one other odd case...<br /> -- The animation triggers only if the <ParentComponent /> re-renders, which leads back to the original problem of the animation triggering only the first time around. I want just the <ChildComponent /> to have the effect, not the whole thing.</p>