CODEWITHSUNDEEP
reactjs
AndreyIto
AndreyIto

Reputation: 974

ReactJS: handleClick syntax

Just starting out with ReactJS, and I'm stumped about syntax. The code below works, but I'm not sure why. This produces a function that tells you if you're logged in or not in a , then logs you in or out (changes state) when you click the button. 

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            isLoggedIn: false
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState(prevState => {
            return {
                isLoggedIn: !prevState.isLoggedIn
            }
        })
    }

    render() {    
        return (
            <div>
                {this.state.isLoggedIn ? <h1>You are now logged in.</h1> : <h1>You are now logged out.</h1>}
                <button onClick={this.handleClick}>{this.state.isLoggedIn ? <h3>LOG OUT</h3> : <h3>LOG IN</h3>}</button>
            </div>
        )
    }
}

Upvotes: 2

Views: 519

Answers (2)

Josh Pittman
Josh Pittman

Reputation: 7324

handleClick() {
    this.setState(prevState => {
        return {
            isLoggedIn: !prevState.isLoggedIn
        }
    })
}

could just be rewritten as 

handleClick() {
        this.setState({isLoggedIn: !this.state.isLoggedIn})
    }

setState can either be a function or you can pass it an object. I recommend passing it an object if you are starting out because it just simpler to think about. The reason people also use an updater function is because it references the previous state, the state before it is changed, and this can be useful for batched changes.

For example, let's say you increment a count in state using a state update function 3 times then the final count will be 3.

state = {count: 0}

this.setState( previousState => ({count: previousState.count++}))
this.setState( previousState => ({count: previousState.count++}))
this.setState( previousState => ({count: previousState.count++}))

this.state.count = 3

If you increment state 3 times just using a regular object then the changes will get batched together. Something that often gets overlooked is that setState is asynchronous. State may not change immediately on calling setState because react batches state changes for performance.

state = {count: 0}

this.setState( { count: this.state.count++})
this.setState( { count: this.state.count++})
this.setState( { count: this.state.count++})

this.state.count = 1

So, if you need to reference current state then use an updater function, if you don’t then you can just use an object.

Upvotes: 0

Yousaf
Yousaf

Reputation: 29282

what's prevState?

That's the state before handleClick function was called. setState function is used to change the state of the react component. This setState function can accept a function that receives the current state as an argument which is then modified in the function body. To completely understand how you should modify the state of your component and how setState function works, see using state correctly in react

So {this.handleClick} would return the updated state?

No. It will call the handleClick function when button is clicked. See handling events in react for better understanding of how this works in react

Upvotes: 1

Related Questions