title: TypeError: cannot read property of length undefined? - React Carousel
body: <p>Following this tutorial <a href="https://www.youtube.com/watch?v=l1MYfu5YWHc&amp;list=PLVwSdwIkTF50m5Fnd-_vSIrT8mvtfeZxe&amp;index=8" rel="nofollow noreferrer">here</a> exactly because I want to use this carousel on my website.</p>
  <p>However I get the error &quot;TypeError: cannot read property of undefined&quot;, even though the code is exactly same as tutorial and the tutorial instructor never encounters this error.</p>
  <ol>
  <li>How do I solve this?</li>
  <li>Why do I get this error and the tutorial instructor did not? finding it hard to understand how this happens - the video is only from December 2020</li>
  </ol>
  <p>Thanks in advance.</p>
  <p>Code below:</p>
  <pre><code>import React, {useState} from 'react';
  import styled from 'styled-components'
  import { CarouselData } from '../Data/CarouselData';
  import {FaArrowAltCircleRight, FaArrowAltCircleLeft} from 'react-icons/fa';
  
  export const Carousel = ({slides}) =&gt; {
  
      const [current, setCurrent] = useState(0);
      const length = slides.length;
  
      const nextSlide = () =&gt; {
          setCurrent(current === length -1 ? 0 : current + 1)
      }
      const prevSlide = () =&gt; {
          setCurrent(current === length -1 ? 0 : current + 1);
      }
  
      console.log(current);
      if (!Array.isArray(slides) || slides.length &lt;= 0){
          return null;
      }
  
  
      return (
          &lt;div&gt;
              &lt;Section&gt;
                  &lt;LeftArrow &gt;
                      &lt;FaArrowAltCircleLeft onClick={prevSlide}/&gt;
                  &lt;/LeftArrow&gt;
                  {CarouselData.map((slide, index) =&gt; {
                      return(
                          &lt;img style={{width: &quot;400px&quot;, height: &quot;600px&quot;, borderRadius: &quot;10px&quot;}} src={slide.image} alt=&quot;image&quot; /&gt;
                      )
                  })}
                  &lt;RightArrow &gt;
                      &lt;FaArrowAltCircleRight onClick={nextSlide}/&gt;
                  &lt;/RightArrow&gt;
              &lt;/Section&gt;
              
          &lt;/div&gt;
      )
  }
  
  const Section = styled.div`
      position: relative;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  `
  const LeftArrow = styled.div`
      position: absolute;
      top: 50%;
      left: 32px;
      font-size: 3rem;
      color: white;
      z-index: 10;
      cursor: pointer;
      user-select: none;
  
  `
  const RightArrow = styled.div`
      position: absolute;
      top: 50%;
      right: 32px;
      font-size: 3rem;
      color: white;
      z-index: 10;
      cursor: pointer;
      user-select: none;
  `
  const Image = styled.div`
      display: inline-block;
      width: 100px;
      height: 400px;
      border-radius: 10px;
  `
  </code></pre>
  <p>P.S. - if a codesandbox is needed I will make one however this is a small codefile and small issue so did not think was needed</p>