Next.js Discord

Discord Forum

text slider spamming using nextjs

Unanswered
Checkered Giant posted this in #help-forum
Open in Discord
Checkered GiantOP
i am trying to create a text slider in my nextjs project, i got this and i need to the orange text slide to set a new text in a while each 2.5s
so i create a function to slide my 3 text and after that invert the order of my text list to can make that in a while, i create a fonction to put the last text of my list to the first position and i call it after the animation so that change the list and change the text order and i can make that in a while, but when i test my code the ustate setstate function "setTextSliderArray" dont change the value of my list so my list dont change and i keep displaying the same text, my function work one time but not two so if i call it in useffect at the start and with a settimeout 3s after the first time my text change and the second time thats do nothing, i test with console log and i think the probleme is realy the setstate dont make and effect
and if i put the state in my useffect props this just spam my function and dont work
my code below :

2 Replies

Checkered GiantOP
import Nav from '../components/navbar/index'
import styles from './styles.module.scss'
import Image from 'next/image'
import arrow from '../public/arrow_down.png'
import { useEffect, useState } from 'react'

export default function Index() {

  const [textSliderTransform, setTextSliderTransform] = useState(-5.5)
  const [textSliderArray, setTextSliderArray] = useState(['De A à Z','comme des pros','Gratuitement'])
  const [textSliderTrans, setTextSliderTrans] = useState(.4)

  function returnArray() {
    let tmp = textSliderArray.slice()

    let toadd = [tmp.pop()]
    console.log(`poped : ${toadd}  and  ${tmp}`)
    
    let newArray = toadd.concat(tmp)
    tmp = newArray
    setTextSliderArray(newArray) // PROBLEME HERE DONT MAKE ANY EFFECT
    console.log(tmp)
    console.log(textSliderArray)
  }

  function slide(){

    setTextSliderTransform(0)

    setTimeout(() => {

      setTextSliderTrans(0)
      returnArray()
      setTextSliderTransform(-5.5)

    }, 400);

  }

  useEffect(()=>{
    slide()
    setTimeout(() => {
      slide()
    }, 2500);
  },[])

  return (
    <div className={styles.main}>
      
      <div className={styles.start}>

        <div className={styles.start__title}> 

          <span className={styles.title__white}>Votre projet crée</span> 
          <div className={styles.text__slider}>

          {textSliderArray.map((text,i) =>
            <span style={{transform:`translateY(${textSliderTransform}rem)`,transition:`${textSliderTrans}s transform`}} key={i}>{text}</span>
          )}

          </div> 
          
        </div>
        <div className={styles.start__learn}>
          <span>On vous explique</span>
          <Image className={styles.start__image} src={arrow} alt="arrow down" />
          <p>{JSON.stringify(textSliderArray)}</p>
          <p>{textSliderTransform}</p>
        </div>

      </div>

    </div>
  )
}
if someone have an idea about why thats appening please tell me