-1
Gallery export function () { const [estadogaleria, setestadogaleria] = useState (false) const [indice_galeria, setindice_galeria] = useState (0) const [indicehome, setindicehome] = useState (0) const [indicemostrado_galeria, setindicemostrado_galeria] = useState (1) const [total_itens_array, settotal_itens_array] = useState (') const aguia = [ '/images/aguia/aguia1.png', '/images/aguia/aguia2.png', '/images/aguia/aguia3.png', '/images/aguia/aguia4.png', '/images/aguia/aguia5.png', ]
    const cobra = [
      '/imagens/cobra/cobra1.png',
      '/imagens/cobra/cobra2.png',
      '/imagens/cobra/cobra3.png',
      '/imagens/cobra/cobra4.png',
      '/imagens/cobra/cobra5.png',
    ]
    const gorila = [
      '/imagens/gorila/gorila1.png',
      '/imagens/gorila/gorila2.png',
      '/imagens/gorila/gorila3.png',
      '/imagens/gorila/gorila4.png',
      '/imagens/gorila/gorila5.png',
    ]
    cavalo const = [
      '/imagens/horse/horse1.png',
      '/imagens/horse/horse2.png',
      '/imagens/horse/horse3.png',
      '/imagens/horse/horse4.png',
    ]
    const leao = [
      '/imagens/leao/leao1.png',
      '/imagens/leao/leao2.png',
      '/imagens/leao/leao3.png',
      '/imagens/leao/leao4.png',
      '/imagens/leao/leao5.png',
    ]
    const pitbull = [
      '/imagens/pitbull/pitbull1.png',
      '/imagens/pitbull/pitbull2.png',
      '/imagens/pitbull/pitbull3.png',
      '/imagens/pitbull/pitbull4.png',
    ]
    
    
    tubarão const = [
      '/imagens/shark/shark1.png',
      '/imagens/shark/shark2.png',
      '/imagens/shark/shark3.png',
      '/imagens/shark/shark4.png',
    ]
    
    const urso = [
      '/imagens/urso/urso1.png',
      '/imagens/urso/urso2.png',
      '/imagens/urso/urso3.png',
      '/imagens/urso/urso4.png',
      '/imagens/urso/urso5.png',
      '/imagens/urso/urso6.png',
    ]
    
    
   const [imagemGaleria, setimagemGaleria] = useState (null)
  
   
  const teste = useEffect (() => {
   
    if (indicehome === 1) {
      setimagemGaleria (aguia [indice_galeria])
      if (indice_galeria> = aguia.length) {
       setindice_galeria (aguia.length-1)
      }
      if (indicemostrado_galeria> aguia.length) {
        setindicemostrado_galeria (aguia.length)
      }
    }
 
    if (indicehome === 2) {
      setimagemGaleria (cobra [indice_galeria])
      if (indice_galeria> = cobra.length) {
        setindice_galeria (cobra.length-1)
       }
       if (indicemostrado_galeria> cobra.length) {
        setindicemostrado_galeria (cobra.length)
      }
    }
    if (indicehome === 3) {
      setimagemGaleria (gorila [indice_galeria])
      if (indice_galeria> = gorila.length) {
        setindice_galeria (gorila.length-1)
       }
       if (indicemostrado_galeria> gorila.length) {
        setindicemostrado_galeria (gorila.length)
      }
    }
    if (indicehome === 4) {
      setimagemGaleria (horse [indice_galeria])
      if (indice_galeria> = horse.length) {
        setindice_galeria (horse.length-1)
       }
       if (indicemostrado_galeria> horse.length) {
        setindicemostrado_galeria (horse.length)
      }
    }
    if (indicehome === 5) {
      setimagemGaleria (leao [indice_galeria])
      if (indice_galeria> = leao.length) {
        setindice_galeria (leao.length-1)
       }
       if (indicemostrado_galeria> leao.length) {
        setindicemostrado_galeria (leao.length)
      }
    }
    if (indicehome === 6) {
      setimagemGaleria (pitbull [indice_galeria])
      if (indice_galeria> = pitbull.length) {
        setindice_galeria (pitbull.length-1)
       }
       if (indicemostrado_galeria> pitbull.length) {
        setindicemostrado_galeria (pitbull.length)
      }
  
    }
    if (indicehome === 7) {
      setimagemGaleria (shark [indice_galeria])
      if (indice_galeria> = shark.length) {
        setindice_galeria (shark.length-1)
       }
       if (indicemostrado_galeria> shark.length) {
        setindicemostrado_galeria (shark.length)
      }
    }
    if (indicehome === 8) {
      setimagemGaleria (urso [indice_galeria])
      if (indice_galeria> = urso.length) {
        setindice_galeria (urso.length-1)
       }
       if (indicemostrado_galeria> urso.length) {
         setindicemostrado_galeria (urso.length)
       }
    }
  }, [indice_galeria])
     
Function showgallery () {
      setestadogaleria (! estadogaleria)
    setindice_galeria (0)
    setindicemostrado_galeria (1)
   }
     Retorna(
       <>
   <div onClick = {showgaleria} className = 'galeriahome'>
       <img onClick = {() => {setindicehome (1); setimagemGaleria (aguia [indice_galeria]); settotal_itens_array (aguia.length)}} id = 'aguia'src =' / imagens / aguia / aguia1.png '/>
       <img onClick = {() => {setindicehome (2); setimagemGaleria (cobra [indice_galeria]); settotal_itens_array (cobra.length)}} id = 'cobra' src = '/ imagens / cobra / cobra1.png' />
       <img onClick = {() => {setindicehome (3); setimagemGaleria (gorila [indice_galeria]); settotal_itens_array (gorila.length)}} id = 'gorila'src =' / imagens / gorila / gorila1.png '/>
       <img onClick = {() => {setindicehome (4); setimagemGaleria (horse [indice_galeria]); settotal_itens_array (horse.length)}} id = 'horse'src =' / imagens / horse / horse1.png '/>
       <img onClick = {() => {setindicehome (5); setimagemGaleria (leao [indice_galeria]); settotal_itens_array (leao.length)}} id = 'leao' src = '/ imagens / leao / leao1.png' />
       <img onClick = {() => {setindicehome (6); setimagemGaleria (pitbull [indice_galeria]); settotal_itens_array (pitbull.length)}} id = 'pitbull' src = '/ imagens / pitbull / pitbull1.png' />
       <img onClick = {() => {setindicehome (7); setimagemGaleria (shark [indice_galeria]); settotal_itens_array (shark.length)}} id = 'shark' src = '/ imagens / shark / shark1.png' />
       <img onClick = {() => {setindicehome (8); setimagemGaleria (urso [indice_galeria]); settotal_itens_array (urso.length)}} id = 'urso' src = '/ imagens / urso / urso1.png' />
     
   </div>;
   <div className = {estadogaleria? 'GaleriaVisible': 'GaleriaClosed'}>
      <img src = {imagemGaleria} />
      <div> {indicemostrado_galeria} / {total_itens_array} </div>
     <button id = 'seta para a esquerda' onClick = {() => {
     setindice_galeria (indice_galeria-1)
     setindicemostrado_galeria (indicemostrado_galeria-1)
       if (indice_galeria <= 0) {
            setindice_galeria (0)
         }
       if (indicemostrado_galeria <= 1) {
         setindicemostrado_galeria (1)
       }
      }
     }> </button>
     
     <button id = 'seta para a direita' onClick = {() => {
     setindice_galeria (indice_galeria + 1)
     
     setindicemostrado_galeria (indicemostrado_galeria + 1)
     }}  
      > </button>
     
   </div>
   </>
    
     )
}
SOLVED !!! IT WAS A BUG OF MY GOOGLE CHROME because Aundo opened by the edge worked perfectly .
– user219338
Please clarify your problem or provide additional details in order to highlight exactly what you need. The way it’s written these days it’s hard to tell exactly what you’re asking.
–