text slider spamming using nextjs | Next.js | Page 1

mellow jewel Oct 2, 2023, 7:57 AM

#

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 :

tribal compassBOT Oct 2, 2023, 7:57 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

mellow jewel Oct 2, 2023, 7:57 AM

#

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>
  )
}

#text slider spamming using nextjs