score:2

Accepted answer

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>

score:0

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>
  );
}

score:0

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>
  );
};

Related Query

More Query from same tag