Pido disculpas si esta pregunta ya se hizo, es una pregunta simple o para principiantes. La realidad es que busqué en todos lados y no encontré la respuesta. Lo que quiero hacer es renderizar un componente, al que llamé Slider solo porque no se me occurrió otra cosa, que contiene una imagen con información. Lo que quiero hacer es que esa imagen y la información cambien cada 3 segundos, tomando los datos de un arreglo de objetos con los elementos que voy a mostrar. Lo que sucede cuando corro start es que se vuelve loco y no espera los 3 segundos y la imagen y la informacion cambian todo el tiempo cada vez mas rapido. Se que es una pregunta de principiantes pero, alguien me puede ayudar o darme algún tip? Gracias !!
import './Slider.scss';
import '../../global/globalStyles.scss';
import image1 from '../../images/5.jpg';
import image2 from '../../images/6.jpg';
import image3 from '../../images/7.jpg';
import image4 from '../../images/8.jpg';
export default function Slider () {
//El arreglo de objetos, donde cada objeto tiene la imagen y la información de la misma
const images = [
{
src: image1,
title: 'Lorem Ipsum',
subtitle: 'Productos',
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
alt: 'Mesa de café'
},
{
src: image2,
title: 'Lorem Ipsum 2',
subtitle: 'Productos 2',
text: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.',
alt: 'Mesas y sillas en comedor'
},
{
src: image3,
title: 'Lorem Ipsum 3',
subtitle: 'Productos 3',
text: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.',
alt: 'Televisión y mueble'
},
{
src: image4,
title: 'Lorem Ipsum 4',
subtitle: 'Productos 4',
text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.",
alt: 'Sillón esquinero'
}
];
// Primero hice un estado de react asignándole la posición 0 de mi arreglo de objetos
const [image, setImage] = useState(images[0]);
// Luego utilicé useRef para la referencia a los elementos que voy a cambiar,
// asignándole la propiedad correspondiente para cada referencia, por ejemplo,
// para las imagenes utilicé el estado actual en la posición src --> image.src
const imageRef = useRef(image.src);
const titleRef = useRef(image.title);
const subtitleRef = useRef(image.subtitle);
const textRef = useRef(image.text);
const altRef = useRef(image.alt);
// Hice una función timer que tiene una variable 'n' con valor en 0. Luego utilicé un setInterval,
//con una función que va incrementando 'n' hasta llegar al largo de mi arreglo de objetos,
// y dentro de la función utilizo imageChange pasandole como argumento la variable 'n',
// mas abajo se explica que hace esta función. Todo esto cada 3 segundos.
function timer () {
var n = 0;
setInterval(()=>{
if(n > images.length - 1) {
n = 0;
};
imageChange(n);
n++;
},3000)
}
// imageChange recibe un argumento, que va a ser la variable declarada mas arriba, y lo que hace es
// primero setear el estado 'image' con el objeto en la posición que recibe como argumento,
// dentro de mi arreglo de objetos 'images'. Luego utilizo mis referencias para cambiar el valor
// de las mismas con mi estado.
function imageChange(n) {
setImage(images[n]);
imageRef.current = image.src;
titleRef.current = image.title;
subtitleRef.current = image.subtitle;
textRef.current = image.text;
altRef.current = image.alt;
}
// Utilizo useEffect para ejecutar timer()
useEffect(()=> {
timer();
return clearInterval(timer)
})
return (
<div className='grid-main-area slider'>
<div className='text'>
<header>
<p id='slider-subtitle' className='separator'>{ subtitleRef.current }</p>
<h2 id='slider-title'>{ titleRef.current }</h2>
<p id='slider-text'>{ textRef.current }</p>
</header>
</div>
<div className='image'>
<img id='slider-image' src={ imageRef.current } alt={ altRef.current } />
</div>
</div>
)
}