title: Why is an array that is passed correctly via props returning undefined?
body: <p>I'm trying to load each string of an array of strings in a <code>&lt;li&gt;</code> html tag by passing this array via props:</p>
  <pre><code>&lt;CardItem
    src='https://static.news...koinex-banner.png'
    text='my text'
    label='Adventure'
    path='/products'
    description={[&quot;someText1&quot;, &quot;someText2&quot;, &quot;someText3&quot;, &quot;someText4&quot;]}
  /&gt;
  </code></pre>
  <pre><code>function CardItem(props) {
    return (
      &lt;&gt;
        &lt;li className='cards__item'&gt;
          &lt;Link className='cards__item__link' to={props.path}&gt;
            &lt;figure className='cards__item__pic-wrap' data-category={props.label}&gt;
              &lt;img
                className='cards__item__img'
                alt='Travel Image'
                src={props.src}
              /&gt;
            &lt;/figure&gt;
            &lt;div className='cards__item__info'&gt;
              &lt;h5 className='cards__item__text'&gt;{props.text}&lt;/h5&gt;
            &lt;/div&gt;
            &lt;CardDescription description={props.description} /&gt;
          &lt;/Link&gt;
        &lt;/li&gt;
      &lt;/&gt;
    );
  }
  
  export default CardItem;
  </code></pre>
  <pre><code>function CardDescription(props) {
    return (
        &lt;div&gt;
            &lt;ul&gt;
                &lt;li&gt;{props.description[0]} &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    )
  }
  
  export default CardDescription
  </code></pre>
  <p>And I'm getting</p>
  <blockquote>
  <p>TypeError: Cannot read properties of undefined (reading '0')</p>
  </blockquote>
  <p>I'm not sure why <code>props.description</code> prop is returning undefined.</p>
  <p>Also, this TypeError seems to only be happening with the <code>props.description</code> prop.</p>