Как поменять надпись на кнопке через 4 секунды?

Question

[ivan8597]

Привет, ребята подскажите пожалуйста, сейчас по клику на кнопку появляется и по второму клику исчезает картинка, а как через setTimeout сделать чтобы по клику на кнопку картинка исчезала через 4 секунды и на кнопке меняла на Привет

import React,{useState,useEffect} from 'react'
const Button = () => {
  // useEffect(() => {
  //   const time=setTimeout(()=>{
      
  //   },4000)
  //   return () => {
  //   }
  // }, [])
  const[click,setClick]=useState(true)
  return (
    <>
    <button onClick={()=>setClick(!click)}>Click me</button>
    {click? <img src='https://klike.net/uploads/posts/2019-05/1556945414_2.jpg'/> :null}
  </>
  )
}
export default Button

Answer 1

[0xD34F]

const [ buttonText, setButtonText ] = useState('hello, world!!');
const [ clicked, setClicked ] = useState(false);

function onClick() {
  setClicked(true);
  setTimeout(() => {
    setButtonText('fuck the world');
    setClicked(false);
  }, 1000);
}

<button onClick={onClick} disabled={clicked}>{buttonText}</button>
{clicked ? <img src="..." /> : null}

Comments

[szQocks]

очищать не нужно задержу если компонент будет размонтирован до того как отработает коллбэк в таймауте ?

[0xD34F]

szQocks, было бы неплохо.

Answer 2

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/API/s...