diff --git a/README.md b/README.md index 5e7b7bc..55e8b25 100644 --- a/README.md +++ b/README.md @@ -31,11 +31,11 @@ class CounterContainer extends Container { }; increment() { - this.setState({ count: this.state.count + 1 }); + this.setState((prevState) => ({ count: prevState.count + 1 })); } decrement() { - this.setState({ count: this.state.count - 1 }); + this.setState((prevState) => ({ count: prevState.count - 1 })); } } @@ -70,10 +70,10 @@ Component state is nice! It makes sense and people pick it up quickly: class Counter extends React.Component { state = { count: 0 }; increment = () => { - this.setState({ count: this.state.count + 1 }); + this.setState((prevState) => ({ count: prevState.count + 1 })); }; decrement = () => { - this.setState({ count: this.state.count - 1 }); + this.setState((prevState) => ({ count: prevState.count - 1 })); }; render() { return ( @@ -107,8 +107,8 @@ const Amount = React.createContext(1); class Counter extends React.Component { state = { count: 0 }; - increment = amount => { this.setState({ count: this.state.count + amount }); }; - decrement = amount => { this.setState({ count: this.state.count - amount }); }; + increment = amount => { this.setState((prevState) => ({ count: prevState.count + amount })); }; + decrement = amount => { this.setState((prevState) => ({ count: prevState.count - amount })); }; render() { return ( @@ -177,10 +177,10 @@ updating it. class CounterContainer extends Container { state = { count: 0 }; increment = () => { - this.setState({ count: this.state.count + 1 }); + this.setState((prevState) => ({ count: prevState.count + 1 })); }; decrement = () => { - this.setState({ count: this.state.count - 1 }); + this.setState((prevState) => ({ count: prevState.count - 1 })); }; } ``` diff --git a/__tests__/unstated.js b/__tests__/unstated.js index 677747b..484f54d 100644 --- a/__tests__/unstated.js +++ b/__tests__/unstated.js @@ -10,10 +10,10 @@ function render(element) { class CounterContainer extends Container<{ count: number }> { state = { count: 0 }; increment(amount = 1) { - this.setState({ count: this.state.count + amount }); + this.setState(prevState => ({ count: prevState.count + amount })); } decrement(amount = 1) { - this.setState({ count: this.state.count - amount }); + this.setState(prevState => ({ count: prevState.count - amount })); } } diff --git a/example/complex.js b/example/complex.js index 2442919..4b755fb 100644 --- a/example/complex.js +++ b/example/complex.js @@ -27,11 +27,11 @@ class CounterContainer extends Container { }; increment(amount: number) { - this.setState({ count: this.state.count + amount }); + this.setState(prevState => ({ count: prevState.count + amount })); } decrement(amount: number) { - this.setState({ count: this.state.count - amount }); + this.setState(prevState => ({ count: prevState.count - amount })); } } diff --git a/example/simple.js b/example/simple.js index 7681782..a00123f 100644 --- a/example/simple.js +++ b/example/simple.js @@ -11,11 +11,11 @@ class CounterContainer extends Container { state = { count: 0 }; increment() { - this.setState({ count: this.state.count + 1 }); + this.setState(prevState => ({ count: prevState.count + 1 })); } decrement() { - this.setState({ count: this.state.count - 1 }); + this.setState(prevState => ({ count: prevState.count - 1 })); } }