setState update value but displays old value

Question

This simply displays an initial string. Then, when a button is clicked, it changes the string.

When run, though, it displays the initial string. Then, when the button is clicked, you can see the string change for a split second. (a log to the console of the new value is also triggered - and works). But, then the old string gets displayed again.

Why would it revert back if the change was made to the state?

Here is the code for displaying the string:

// Display.js
import React from 'react';

class Display extends React.Component {
    constructor(props) {
        super(props);
         this.state = {
            blogPosts: "The Bingham Blog"
        };
        this.clickHandler=this.clickHandler.bind(this);
    }

    clickHandler() {
        this.setState({
            blogPosts: "Changed!!!!!!!"
        }, () => {console.log(this.state.blogPosts)});
    }
    
    render() {
        return (
            <p>
                <form>
                    <button onClick={this.clickHandler}>Add on</button>
                </form>
                {this.state.blogPosts}
            </p>
        );
    }
}

export default Display;

Here is the App.js file that calls the <Display /> component:

import React from 'react';
import Display from "./Display";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Enter text for the blog</h1>
      </header>
    <div className="display">
        <Display />
      </div>
    </div>
  );
}

export default App;

I have been struggling with this for days. I know it is likely the asynchronous nature of setState, but I don't know how to fix it.

Duplicate of [prevent refresh of page when button inside form clicked](https://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked) (specifically [this answer](https://stackoverflow.com/a/13262305/8898840)) — Guy Incognito, Oct 14 '20 at 20:05
Welcome to SO. Just check the duplicate question. You can use `event.preventDefault()` in your handler or you can just set a `button` type to your button in the form like `type="button"` — devserkan, Oct 14 '20 at 20:09

score 1 · Answer 1 · edited Oct 14 '20 at 21:12

1

The reason is if you have a <button> inside a <form>, when you click that <button> it will trigger submit action for that form.

So, you should provide type attribute to the button. type="button"

<button type="button" onClick={this.clickHandler}>Add on</button>

edited Oct 14 '20 at 21:12

Emile Bergeron

17,074
5
83
129

answered Oct 14 '20 at 20:10

Tuhin

3,335
2
16
27

Oooooooooooooooooooooooh WOW! Thank you sooooo much. I was about to lose my mind. Total newbie move. Thanks again! – checkRaise Oct 15 '20 at 23:53

score 0 · Answer 2 · edited Oct 14 '20 at 21:12

0

Because your button is inside a <form> tag. By default on clicking the button, the form will submit and there will be a reload of the browser tab. That is why your state is reverted back to the initial state. Try moving your button out of that form. It should work.

edited Oct 14 '20 at 21:12

Emile Bergeron

17,074
5
83
129

answered Oct 14 '20 at 20:09

Md Sabbir Alam

4,937
3
15
30

Correct. Alternatively, you can put e.preventDefault() on top of the event handler. – HynekS Oct 14 '20 at 21:27
You are the BEST! Thank you so much. I was losing my mind. Once I get past this newbie stuff I can get into the real meat of React. Thanks again so much! – checkRaise Oct 15 '20 at 23:55

setState update value but displays old value

2 Answers2