App.js: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from "react"

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
        this.handleClick = this.handleClick.bind(this)
    }
    
    handleClick() {
        this.setState(prevState => {
            return {
                count : prevState.count + 1
            }
        })
    }
    
    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.handleClick}>Change!</button>
            </div>
        )
    }
}

export default App

custom method to change state

pay attention to this part:

1
2
3
4
5
6
7
handleClick() {
        this.setState(prevState => {
            return {
                count : prevState.count + 1
            }
        })
    }

anonymous function inside setState, originally: setState(() => {...}), since there’s only one variable passed in(prevState), () is omitted.

Inside the anonymous function, body is inside {}. The body is returning something: return {}. Why return {} instead of return ()? Because it’s returning a new version of state, just like changing clothes. Since it’s returning new state, it’s returning an object, and objects are represented in {} in js, so it’s return {} instead of return ().

Also, since it’s new version of state, things should go in exact the same fashion as is it in state of constructor:

1
2
3
this.state = {
            count: 0
        }

so it’s:

1
2
3
return {
      count : prevState.count + 1
}

bind custom method with class

Each time when you write a custom method which is going to invoke setState method, you need to bind this method to the current class. It seems obvious, but you need to:

1
this.handleClick = this.handleClick.bind(this)

if not:

1
TypeError: Cannot read property 'setState' of undefined

A more involved example

todosData.js: mimic API call JSON data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const todosData = [
    {
        id: 1,
        text: "Take out the trash",
        completed: true
    },
    {
        id: 2,
        text: "Grocery shopping",
        completed: false
    },
    {
        id: 3,
        text: "Clean gecko tank",
        completed: false
    },
    {
        id: 4,
        text: "Mow lawn",
        completed: true
    },
    {
        id: 5,
        text: "Catch up on Arrested Development",
        completed: false
    }
]

export default todosData

TodoItem.js: wrapped objects, ~button(single element) in the previous example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react"

function TodoItem(props) {
    return (
        <div className="todo-item">
            <input 
                type="checkbox" 
                checked={props.item.completed} 
                onChange={() => props.handleChange(props.item.id)}
            />
            <p>{props.item.text}</p>
        </div>
    )
}

export default TodoItem

App.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todosData
        }
        this.handleChange = this.handleChange.bind(this)
    }
    
    handleChange(id) {
        this.setState(prevState => {
            const updatedTodos = prevState.todos.map(todo => {
                if (todo.id === id) {
                    // should not change previous states directly
                    // todo.completed = !todo.completed

                    // return a new object
                    return {
                        ...todo, 
                        completed: !todo.completed
                    }
                }
                return todo
            })
            return {
                todos: updatedTodos
            }
        })
    }
    
    render() {
        const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)
        
        return (
            <div className="todo-list">
                {todoItems}
            </div>
        )    
    }
}

export default App