Is it possible for the button text to switch from Farewell to Greetings after two clicks?

Question

Is it possible for the button text to switch from Farewell to Greetings after two clicks?

There seems to be a strange issue in my React TS project - I have to click the button twice to switch the text from "Goodbye" to "Hello", but not the other way around. Any ideas why?

import { useState } from 'react' 

const ChangeTextButton = () => {

    const [buttonText, setButtonText] = useState("Click me!")
    var changedBefore = false;

    function changeText() {
        
        if (changedBefore) {
            setButtonText("Hello")
        } else {
            setButtonText("Goodbye")
        }
        
        changedBefore = !changedBefore
        return buttonText;
    }

    return(
        <button onClick={() => changeText()}>{buttonText}</button>
    );
}

export default ChangeTextButton;

Seems like there might be some issues with this code, but I'm still learning TypeScript and JS.

typescript react-typescript

Answer 1

Answer №1

The reason for this issue is that the variable changedBefore gets reset to false after each rerender.

Initially starting as false, upon the first click, it changes the button text to "Goodbye" and triggers a rerender. This rerender resets the value back to false. On the next click, although the text changes to "Goodbye" again, since it's in the same state as the current one, there is no rerender triggered. This results in changedBefore being set to

true</code for the subsequent click, which finally changes the text to "Hello."</p>
<p>To avoid this behavior, utilizing <code>useState

or useRef for the changedBefore variable is recommended, like so:

import { useState } from 'react' 

const ChangeTextButton = () => {

    const [buttonText, setButtonText] = useState("Click me!")
    const [changedBefore, setChangedBefore] = useState(false);

    function changeText() {
        
        if (changedBefore) {
            setButtonText("Hello")
        } else {
            setButtonText("Goodbye")
        }
        
        setChangedBefore(cb => !cb)
    }

    return(
        <button onClick={() => changeText()}>{buttonText}</button>
    );
}

export default ChangeTextButton;

Demo: https://stackblitz.com/edit/react-wuulup?file=src%2FApp.js

Answer 2

The reason for this issue is that the variable changedBefore gets reset to false after each rerender.

Initially starting as false, upon the first click, it changes the button text to "Goodbye" and triggers a rerender. This rerender resets the value back to false. On the next click, although the text changes to "Goodbye" again, since it's in the same state as the current one, there is no rerender triggered. This results in changedBefore being set to

true</code for the subsequent click, which finally changes the text to "Hello."</p>
<p>To avoid this behavior, utilizing <code>useState

or useRef for the changedBefore variable is recommended, like so:

import { useState } from 'react' 

const ChangeTextButton = () => {

    const [buttonText, setButtonText] = useState("Click me!")
    const [changedBefore, setChangedBefore] = useState(false);

    function changeText() {
        
        if (changedBefore) {
            setButtonText("Hello")
        } else {
            setButtonText("Goodbye")
        }
        
        setChangedBefore(cb => !cb)
    }

    return(
        <button onClick={() => changeText()}>{buttonText}</button>
    );
}

export default ChangeTextButton;

Demo: https://stackblitz.com/edit/react-wuulup?file=src%2FApp.js

Is it possible for the button text to switch from Farewell to Greetings after two clicks?

Answer №1

Similar questions

I'm having trouble with my Typescript file in Vscode - every time I try to edit the css code, all the text turns red. Can someone

Unable to set up enzyme adapter

Issue with Angular 2 Routing: Unable to find a matching route

Leverage the spread operator (or an equivalent method) to transfer all attributes from a solitary mixin

Leverage the TypeScript Compiler API to verify whether an interface property signature permits the value of undefined (for example, prop1?:

Encountered an error trying to access properties that are undefined while working with Ionic Angular, specifically having trouble reading the 'update

Issue: NG0204: Unable to find solutions for all parameters in NzModalRef: (?, ?, ?)

How can I customize a currency directive in AngularJS using filters?

Rearrange component positions without triggering a re-render

Warning: Node encountering unexpected Unhandled Promise Rejection ERROR

"Adjusting the position of an Ionic Menu on-the-fly

Best practices for using useEffect to fetch data from an API_FETCH in a certain condition

Can an attribute be assigned to an Angular host element without specifying a value?

Guide to creating a setter for an array property in Angular 2 (Typescript) that will be filled by the view

Verification based on conditions for Angular reactive forms

What is causing the issue of URL parameters becoming undefined when performing service injection in the app component?

In TypeScript, encountering an unanticipated intersection

Definition of Angular 2 File

Is it possible to include multiple eventTypes in a single function call?

Verify in Typescript if there is at least one value supplied