How to change the state in reactjs

Question

import React from 'react';
import ReactDOM from 'react-dom';
import {User} from './components/User';
import {DefaultGame} from './components/DefaultGame';
import {EndGame} from './components/endGame';

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            matchResults:undefined,
            gameStatus:undefined,

        };//end if state

    }//end of constructor

    startGame(event) {
        console.log('the game is starting');
        this.setState({
            gameStatus:true
        })
    }

    endGameUser(results) {
        console.log('clicked end Game', results);

        this.setState({
            gameStatus:false,
            matchResults:'hello'
        });

        console.log(this.state);
    }

    render() {



            if (this.state.gameStatus === true) {
                console.log('returning this');

                    return  (<User name={prompt('What is your name')} endGame={this.endGameUser.bind(this)} />)
            } else if (this.state.gameStatus === false) {
                return (
                    <EndGame userResultsWins='winnihn' />
                )
            } else {
                console.log('returning this not stating')
                    return (<DefaultGame startGameUser={(event) => this.startGame(event)}/>)

            }





    }
}//end of App component



ReactDOM.render(<Game/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

import React from 'react';
import ReactDOM from 'react-dom';
import {User} from './components/User';
import {DefaultGame} from './components/DefaultGame';
import {EndGame} from './components/endGame';

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            matchResults:undefined,
            gameStatus:undefined,

        };//end if state

    }//end of constructor

    startGame(event) {
        console.log('the game is starting');
        this.setState({
            gameStatus:true
        })
    }

    endGameUser(results) {
        console.log('clicked end Game', results);

        this.setState({
            gameStatus:false,
            matchResults:'hello'
        });

        console.log(this.state);
    }

    render() {



            if (this.state.gameStatus === true) {
                console.log('returning this');

                    return  (<User name={prompt('What is your name')} endGame={this.endGameUser.bind(this)} />)
            } else if (this.state.gameStatus === false) {
                return (
                    <EndGame userResultsWins='winnihn' />
                )
            } else {
                console.log('returning this not stating')
                    return (<DefaultGame startGameUser={(event) => this.startGame(event)}/>)

            }





    }
}//end of App component



ReactDOM.render(<Game/>, document.getElementById('app'))

Hi, I am new to react and i made a simple game of rock paper scissors. I want to change the state of matchResults on the endGameUser function. I am able to change the state of gameStatus to false, but i can not change the state of matchResults. Right now i want toi change it to hello, but eventually i want to set it equal to an object. Can anyone point me in the right direction?

Answer 1

You can use setState. Here are the docs! The way you are currently using setState is actually correct but its not doing what you think it is doing. setState is asynchronous. So you can't call setState then right after see that this.state has changed. React batches setState calls until a certain time. The next time your render is called you will see that the state has changed. Move the console log to render and you will see this.

Answer 2

The state is being changed correctly but the problem is that you're checking the state before it's been updated.

Try moving your console.log to the callback.

this.setState({
    gameStatus:false,
    matchResults:'hello'
}, () => console.log(this.state));