Glows

[JohnnyGoodrich]

Carousel Function:

    const eachDrink = drinks.drinks.map((drink, imageIndex) => 
    <Carousel.Item key={imageIndex}>
    <img key={imageIndex}
      className="d-block w-100"
      src={drinks.drinks[imageIndex].strDrinkThumb}
      alt="drink"/>
      <Carousel.Caption>
      <h3 key={imageIndex}>{drinks.drinks[imageIndex].strDrink}</h3>
      <p key={imageIndex}>{drinks.drinks[imageIndex].strIngredient1}</p>
    </Carousel.Caption>
    </Carousel.Item>
    )
    return (
        <Carousel activeIndex={index} onSelect={handleSelect}>
            {eachDrink}
        </Carousel>
    );
}

Proud of this one because it involved collaboration between both teammates and took a lot of time to figure out/get it to work but it turned out great

[maker-jws]

@JohnnyGoodrich @emblaido This is great work, and it is good to see teamwork to get the carousel to update in react.

Some areas for improvement:

• [ ] Isolate this carousel functionality to its own component that could be rendered by Home component
• [ ] consider changing variable eachDrink to drinkCarouselItems, because the map generates an array of Item components.
• [ ] Add conditional rendering or optional chaining to map over drink.drink only if the array was defined or had a length property.