Using React Hooks I would like to change the text of my button when a user clicks it to say "Added" and then I would like to set it back to the original text "Add to Cart" after 1 second. I assume I would use setTimeout for this but am having trouble figuring out how to use it in this case.
I have this
const [buttonText, setButtonText] = useState("Add To Cart");
and this so far.
<button
type="submit"
onClick={() => setButtonText("Added")}
>
{buttonText}
</button>
Add the timeout inside useEffect, and pass buttonText as dependency, every time the buttonText is updated, the timeout will restore the default text value:
const text = "Add To Cart"
const [buttonText, setButtonText] = useState(text);
useEffect(()=> {
const timer = setTimeout(()=> {
setButtonText(text);
}, 1000);
return ()=> clearTimeout(timer);
}, [buttonText])
return (<button
type="submit"
onClick={() => setButtonText("Added")}
>
{buttonText}
</button>)
In this way should work:
<button
type="submit"
onClick={() => {
setButtonText("Added");
setTimeout(() => {
setButtonText("Add To Cart");
}, 1000);
}}
>
{buttonText}
</button>
Here an example: https://codesandbox.io/s/react-hooks-change-text-of-button-on-click-and-then-back-again-qhbzv?file=/src/App.js
Let's use useEffect:
useEffect(() => {
const timeout = window.setTimeout(() => {
setButtonText("Add To Cart")
}, 1000)
return () => window.clearTimeout(timeoutID )
}, [buttonText])
Just change the onClick handler to this
onClick={
setButtonText("Added");
setTimeout(() => setButtonText("Add to Cart"), 1000)
}
Here is a solution I made https://codesandbox.io/s/objective-kilby-nicm4?file=/src/App.js
I just used setTimeout to make it a 1 sec change after i got the update button title from the function.