my state updates a click later than it should

Question

I'm creating a typing game, and I want to update the points depending on if the input is correct or not. on initial click, regardless of right or wrong, the points read as 0 (they should update). if the next click is correct or not, the points will read the value update from the previous click so even a success will register as a failure and -5 points. why is my state being read incorrectly/late?

import React, { Component } from 'react';
import './typingGame.scss';

class TypingGame extends Component {
    constructor() {
        super();

    this.state = {
        points: 0,
    }
}

checkInput = () => {
    var helloWorld = document.getElementById('helloWorld').innerHTML;
    var input = document.getElementById('userInput').value;

    if (input !== helloWorld) {
        this.setState({ points: this.state.points - 5 });
        console.log("failure");
    } else {
        this.setState({ points: this.state.points + 5 });
        console.log("success")
    }
    console.log(this.state.points)
}

render() {

    return (
        <section>
            <p id="helloWorld">hello world</p>
            <input id="userInput"></input>
            <button onClick={this.checkInput}></button>
        </section>
    );
}
}

export default TypingGame;

setState is async operation, I think your console.log is done before the update — Zion Ay, May 17 '21 at 14:42
it makes sense that setState is an async operation, I'm just not sure how to update my code in order for it to work. should I not be using setState? is there another way of going about this? — Arnold Don Paul, May 17 '21 at 14:59

score 1 · Answer 1 · answered May 17 '21 at 14:42

1

You're using React, I think you shouldn't use any document.getElementById(), bind directly the input to a state value like following :

constructor() {
    super();

    this.state = {
        points: 0,
        userInput: ''
    }
}

checkInput = () => {
    if (this.state.userInput !== 'helloWorld') {
        this.setState({ points: this.state.points - 5 });
        console.log("failure");
    } else {
        this.setState({ points: this.state.points + 5 });
        console.log("success")
    }
}

<input id="userInput" value={this.state.userInput} onChange={(e) => this.setState({ userInput: e.target.value })}></input>

answered May 17 '21 at 14:42

VersifiXion

2,152
5
22
40

thanks for the advice. I'm still learning best practices. however, this hasn't fixed the problem with state updating late. any ideas regarding that? – Arnold Don Paul May 17 '21 at 14:50
so even after pressing the button, it still doesnt update the points ? – VersifiXion May 17 '21 at 14:53
correct, it gives the value from what the previous click should have been updated to – Arnold Don Paul May 17 '21 at 14:57

my state updates a click later than it should

1 Answers1