title: TypeError: Cannot read property 'add' of undefined
body: <p>This is a slider with 3 images that work perfectly in vanilla javascript and I am trying to make it work in React.js. After  3 images I got this error. I understand that maybe the problem is because of the jsx is rendered after the code but I don't know how to work around it and it also tells me that let slideInterval variable is declared but never read, when I place the cursor on it, please help.</p>
  
  <pre><code>        &lt;prev&gt; import React from 'react';
          import '../style.css';
          import photo1 from '../images/01.jpg';
          import photo2 from '../images/02.jpg';
          import photo3 from '../images/03.jpg';
  
  
        const Slider2 = () =&gt; {
  
  
        const slides = [photo1, photo2, photo3]&lt;code&gt;
  
        &lt;prev&gt;const auto = true; // Auto scroll
              const intervalTime = 3000;
              let slideInterval;
             //const slides =  document.querySelectorAll('.slide');
             const nextSlide = () =&gt; {
             // Get current class
              //console.log(slides);
              const current = document.querySelector(".current");
             // Remove current class
             current.classList.remove("current");
             // Check for next slide
             if (current.nextElementSibling) {
             // Add current to next sibling
             current.nextElementSibling.classList.add("current");
             } else {
             // Add current to start
  
             slides[0].classList.add("current");
  
             setTimeout(() =&gt; current.classList.remove("current"));
             }
             };&lt;code&gt;
             &lt;prev&gt;if (auto) {
             // Run next slide at interval time
             slideInterval = setInterval(nextSlide, intervalTime);
              }
  
             return (
             &lt;div class="slider"&gt;
             &lt;div class="slide current"&gt;
             &lt;img src={slides[0]} /&gt;
             &lt;/div&gt;
             &lt;div class="slide  "&gt;
             &lt;img src={slides[1]} /&gt;
             &lt;/div&gt;
             &lt;div class="slide  "&gt;
             &lt;img src={slides[2]} /&gt;
             &lt;/div&gt;
             &lt;/div&gt;
             );
             };
  
             export default Slider2;                 &lt;code&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/SApRO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SApRO.png" alt="enter image description here"></a></p>