CODEWITHSUNDEEP
javascriptreactjstypescript
Saghar Francis
Saghar Francis

Reputation: 77

React onClick event working on twice clicks when clicking again

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

Upvotes: 3

Views: 3679

Answers (3)

Shan
Shan

Reputation: 1568

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

Upvotes: 0

Inam Ur Rehman
Inam Ur Rehman

Reputation: 154

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

Upvotes: 0

Ahmad Habib
Ahmad Habib

Reputation: 2382

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>

Upvotes: 2

Related Questions