Construí una cuadrícula de imágenes provenientes de una API y ahora estoy tratando de construir un control deslizante. La primera imagen que se mostrará debe ser la que se hizo clic en la cuadrícula debajo del control deslizante, y cuando se hace clic en siguiente/anterior, vaya a la imagen siguiente/anterior en la matriz.

¿Cómo podría conseguirlo?

Estoy intentando establecer el estado inicial de ``ìmgToShow```en el img en el que se hizo clic, pero no obtengo nada en la consola. La idea sería obtener eso, y luego, todavía no sé cómo, actualizar el estado para mostrar la siguiente img en el Array.

album es la matriz de objetos con todas las imágenes. El componente Obtenido en mi contexto clickedImage contiene la URL de la imagen en la que se hizo clic. Lo obtengo de un evento de clic en otro componente.

Este es mi componente:

 import React, { useContext, useState } from "react"; import { AlbumContext } from "../../context/AlbumContext"; import "./carousel.css"; import BtnSlider from "./BtnSlider"; function Carousel() { const { clickedImage, albums } = useContext(AlbumContext); const [imgToShow, setImgToShow] = useState(clickedImage); console.log("imgTOSHOW", imgToShow); // empty in console console.log("clickedIMG in context", clickedImage); // gives me the URL clicked const [slideIndex, setSlideIndex] = useState(1); const nextSlide = () => { if (slideIndex !== albums.length) { setSlideIndex(slideIndex + 1); } else if (slideIndex === albums.length) { setSlideIndex(1); } }; const prevSlide = () => {}; return ( <div className="container-slider"> {albums && albums.map((item, index) => { return ( <div key={item.id} className={ slideIndex === index + 1 ? "slide active-anim" : "slide" } > <img src={imgToShow} alt="" /> </div> ); })} <BtnSlider moveSlide={nextSlide} direction={"next"} /> <BtnSlider moveSlide={prevSlide} direction={"prev"} /> </div> ); } export default Carousel