I am using react with typescript. I created one button and now I want to change it to invert its text on onClick event for that I am using useState to change the text of the button, for text inversion, I create one boolean flag.
If I click the button first it works perfectly and when I click again it. It won't work on first click.
const Panel = () => {
let flag: boolean = false;
const [btnText, setBtnText] = useState("hello!");
const changeBtnText = () => {
if(!playButtonFlag){
setBtnText("How are you!");
flag = true;
}
else{
setBtnText("hello!");
flag = false;
}
}
return <div>
<Button name={btnText} onClick={changeBtnText}/>
</div>;
};
The error can be in the variable you are using to check i.e playButtonFlag. It is better to use it via state: React does not re-render when a common variable's value is changed.
A little help for you using an example below:
import React, {useState} from "react";
export default function App() {
const [btnText, setBtnText] = useState("hello!");
const [flag, setFlag] = useState(false);
const changeBtnText = () => {
if(!flag)
setBtnText("How are you!");
else
setBtnText("hello!");
setFlag(!flag);
}
return <div>
<button value={btnText} onClick={changeBtnText}>{btnText}</button>
</div>;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Your flag let flag: boolean = false; variable will be re-initialized with false after re-render. There is a possible chance that playButtonFlag might be the problem. It is better to maintain a state, if you really want that flag to render changes.
const Panel = () => {
const [btnText, setBtnText] = useState("hello!");
const [flag,setFlag] = useState(false);
const changeBtnText = () => {
setBtnText(!flag ? "How are you!" : "hello!");
setFlag(currentFlag => !currentFlag)
}
return (
<div>
<Button name={btnText} onClick={changeBtnText} />
</div>
);
};
or you can set the button text based on the current text of the button
const Panel = () => {
const [btnText, setBtnText] = useState("hello!");
const changeBtnText = () => {
setBtnText(btnText === "hello!" ? "How are you!" : "hello!");
}
return (
<div>
<Button name={btnText} onClick={changeBtnText} />
</div>
);
};
You can do it with object in a simple way
import { useState } from "react";
import "./styles.css";
const BUTTON_TEXT = {
"hello!": "How are you!",
"How are you!": "hello!"
};
const Panel = () => {
const [btnText, setBtnText] = useState("hello!");
const changeBtnText = () => {
setBtnText(BUTTON_TEXT[btnText]);
};
return (
<div>
<button name={btnText} onClick={changeBtnText}>
{btnText}
</button>
</div>
);
};
export default function App() {
return (
<div className="App">
<Panel />
</div>
);
}