Manu Santos

Compreendo, mt obg pelo seu tempo em ajudar! So uma dúvida. Mas não é muito adequado usar tipos de loops em react? seria mais apropriado criar uma função manualmente para esse obejetivo, como foi o caso? Ou foi a sintaxe usada ou minha logica que estava errada? Agradeço desde já!

A função automática chamada por onclick, era para percorrer o array, e a cada indice do array, fazer a condição do for, e mudar a imagem no SetImagem com base nesse indice. Mas ele esta renderizando as imgs de uma vez, e não esta dando tempo de mostrar uma por uma, e repetir isso a cada 1seg : setInterval. CODIGO --> import { useState, useEffect } from 'react'; function Buttons(props) { return ( <button className='verde' onClick={props.clicar}> verde </button> ); } export function App() { let imagens = [ 'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/desligado.png?raw=true', 'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/verde.png?raw=true', 'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/vermelho.png?raw=true', 'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/amarelo.png?raw=true', ]; const Automatico = () => { for (key = 0; key < 4; ++key ) { imagem = imagens[key] console.log(imagem) } setImagem(imagem) } let [imagem, setImagem] = useState(imagens[0]); const [nextImg, setNextImg] = useState(true); const Trocarimagem = novaimagem => { setImagem(novaimagem); setNextImg(!nextImg); }; return ( <div className='App'> <div style={{ marginTop: '15px' }}> <Buttons clicar={() => Trocarimagem(imagens[1])} /> <button onClick={() => Trocarimagem(imagens[2])}>vermelho</button> <button onClick={() => Trocarimagem(imagens[3])}>amarelo</button> <button onClick={() => setInterval(Automatico, 1000)}>automatico</button> <img src={imagem} style={{ width: '20%' }} /> </div> </div> ); }