title: Transitioning between React elements being rendered dynamically from an Object
body: <p>I have a React component that dynamically renders slides on the page from a <code>slides</code> object based on a state variable. I'd like to add some CSS transitions when the slides enter and exit, but I can't seem to find a good way to do it. Below is a simplified example of what I'm working with, but should get the idea across:</p>
  <pre><code>const slides = {
     slide1: {
        id: 1,
        content: &lt;&gt;Slide content&lt;/&gt;,
        nextSlide: slide2,
        prevSlide: null
     },
     slide2: {
        id: 2,
        content: &lt;&gt;Slide content&lt;/&gt;,
        nextSlide: slide3,
        prevSlide: slide1,
     },
     slide3: {
        id: 3,
        content: &lt;&gt;Slide content&lt;/&gt;,
        nextSlide: null,
        prevSlide: slide2
     }
  }
  
  const [currentSlide, setCurrentSlide] = useState(&quot;slide1&quot;)
  
  return (
     &lt;div&gt;
        {slides[currentSlide].content}
        &lt;button onClick={() =&gt; setCurrentSlide(slides[currentSlide].prevSlide}
           Previous Slide
        &lt;/button&gt;
        &lt;button onClick={() =&gt; setCurrentSlide(slides[currentSlide].nextSlide}
           Next Slide
        &lt;/button&gt;
     &lt;/div&gt;
  )
  </code></pre>
  <p>I've tried writing a handler function that sets the slide state change on a delay and then triggers a separate state variable that inject a CSS class name corresponding to some transition rules into the content container, but I couldn't get it working how I thought it would. What's the best way to do this?</p>