Imagem automatica React

[Manu Santos]

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>

  );

}

[wash]

Olá!
Verifique se seria assim:
 

import { useState } from 'react'

function Buttons(props) {
  return (
    <button className="verde" onClick={props.clicar}>
      verde
    </button>
  )
}

const 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'
]
let timeInterval = () => {}

export default function App() {
  const [imageIndex, setImageIndex] = useState(0)

  const TrocarImagem = (novaImagem) => {
    clearInterval(timeInterval)
    setImageIndex(novaImagem)
  }

  const Automatico = () => {
    console.log('automatico :>> ')
    timeInterval = setInterval(
      () =>
        setImageIndex((old) => {
          const nextImage = old + 1
          return nextImage >= imagens.length ? 1 : nextImage
        }),
      1000
    )
  }

  return (
    <div className="App">
      <div style={{ marginTop: '15px' }}>
        <Buttons clicar={() => TrocarImagem(1)} />
        <button onClick={() => TrocarImagem(2)}>vermelho</button>
        <button onClick={() => TrocarImagem(3)}>amarelo</button>
        <button onClick={Automatico}>automatico</button>
        <img src={imagens[imageIndex]} style={{ width: '20%' }} />
      </div>
    </div>
  )
}

 

[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á!