I have a question about onClick event using React hooks. I actually want the text to change to another text when user click and when user click again, it goes back to first text. For example user click text "Change First", then the text change to "Change Second". Then if user click the "Change Second", the text change to "Change First". It will change as long as user click the text.
This is my useState function:
const [shopStat, setshopChange] = useState("Change first");
And below is the part where I want to change the text:
<div className="featuredItem">
<span className="featuredTitle">Your text is</span>
<div className="featuredMoneyContainer">
<span
className="featuredMoney"
style={{ color: green }}
onClick={() => setshopChange("Change second")}
>
{shopStat}
</span>
</div>
</div>
However, the code above only change the text once to "Change Second" and I cannot click the text again to change it back to "Change First". Hope you all can help me. Thank you.
Set state functions accept curent state as parameter so you can use it like that.
onClick={() => setshopChange((currentState) => currentState === "Change second" ? "Change First" : "Change second" )}
import React, {useState} from 'react';
import './App.css';
function App() {
const [shopStat, setshopChange] = useState(true);
return (
<main onClick={() => setshopChange(!shopStat)}>
{shopStat === true ? "Change first" : "Change second"}
</main>
);
}
export default App;