Как изменить Z-index с задержкой в 5сек?

Question

[MarEeeeee]

Требуется поменять у данного блока z-index через определенный промежуток времени. Почему мой вариант не работает ? Как реализовать правильнее?

export default function(){
    const timerRef = useRef(null);

    const changeIndex = () => {
        const style = {zIndex:30000}
        timerRef.current = setTimeout(()=>{
            console.log(styles)
        },1000)
    }



    return(       
            <header className={styles.header + " navbar navbar-expand-lg navbar-light sticky-top " } style = {{changeIndex}}></header>
)

Answer 1

[Klein Maximus]

import React, { useEffect, useState } from 'react';

// Функция-инициализатор нужна, чтобы вынести создание объекта состояния из компонента
const initStyle = () => ({ zIndex: 0 });

const Component = () => {
  const [style, setStyle] = useState(initStyle);

  useEffect(() => {
    // Вот здесь можно менять значения - zIndex поменяется через секунду
    const timer = setTimeout(() => setStyle({ zIndex: 1 }), 1000);

    // Надо не забыть почистить счетчик setTimeout
    return () => clearTimeout(timer);
  }, []);

  return <header className={`${styles.header} navbar navbar-expand-lg navbar-light sticky-top`} style={style} />
};

Можно сделать несколько иначе

import React, { useEffect, useMemo, useState } from 'react';

const Component = () => {
  const [zIndex, setZIndex] = useState(0);

  // Поскольку style это объект, то неплохо бы его мемоизировать
  const style = useMemo(() => ({ zIndex }), [zIndex]);

  useEffect(() => {
    const timer = setTimeout(() => setZIndex(1), 1000);

    return () => clearTimeout(timer);
  }, []);

  return <header className={`${styles.header} navbar navbar-expand-lg navbar-light sticky-top`} style={style} />
};