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