From 92af968c587358832b95052eb792453db90fa3b9 Mon Sep 17 00:00:00 2001 From: Hozefa Date: Thu, 20 Apr 2017 21:37:17 -0700 Subject: [PATCH 1/2] setState update arrow function syntax updating the docs to remove `return` while using `arrow` functions. Also helps to keep the snippets examples in sync with other docs https://github.com/facebook/react/blob/master/docs/docs/state-and-lifecycle.md#state-updates-may-be-asynchronous --- docs/docs/reference-react-component.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/docs/reference-react-component.md b/docs/docs/reference-react-component.md index 2c1b0770cb871..1b60c5dca66c4 100644 --- a/docs/docs/reference-react-component.md +++ b/docs/docs/reference-react-component.md @@ -249,9 +249,9 @@ The first argument is an `updater` function with the signature: `prevState` is a reference to the previous state. It should not be directly mutated. Instead, changes should be represented by building a new state object based on the input from `prevState` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`: ```javascript -this.setState((prevState, props) => { - return {counter: prevState.counter + props.step}; -}); +this.setState((prevState, props) => ({ + counter: prevState.counter + props.step +})); ``` Both `prevState` and `props` received by the updater function are guaranteed to be up-to-date. @@ -284,9 +284,9 @@ Object.assign( Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the previous state, we recommend using the updater function form, instead: ```js -this.setState((prevState) => { - return {counter: prevState.quantity + 1}; -}); +this.setState((prevState) => ({ + counter: prevState.quantity + 1; +})); ``` For more detail, see the [State and Lifecycle guide](/react/docs/state-and-lifecycle.html). From 732b75c988d2aa0f8ff0e49ecc2167094c95ff1d Mon Sep 17 00:00:00 2001 From: Hozefa Date: Wed, 26 Apr 2017 19:50:20 -0700 Subject: [PATCH 2/2] update per review comments using `function` to avoid confusion in case some beginner level engineer looks at the docs --- docs/docs/reference-react-component.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/docs/reference-react-component.md b/docs/docs/reference-react-component.md index 1b60c5dca66c4..10605f88828ab 100644 --- a/docs/docs/reference-react-component.md +++ b/docs/docs/reference-react-component.md @@ -249,9 +249,9 @@ The first argument is an `updater` function with the signature: `prevState` is a reference to the previous state. It should not be directly mutated. Instead, changes should be represented by building a new state object based on the input from `prevState` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`: ```javascript -this.setState((prevState, props) => ({ - counter: prevState.counter + props.step -})); +this.setState(function(prevState, props) { + return { counter: prevState.counter + props.step } +}); ``` Both `prevState` and `props` received by the updater function are guaranteed to be up-to-date. @@ -284,9 +284,9 @@ Object.assign( Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the previous state, we recommend using the updater function form, instead: ```js -this.setState((prevState) => ({ - counter: prevState.quantity + 1; -})); +this.setState(function(prevState) { + return { counter: prevState.quantity + 1 } +}); ``` For more detail, see the [State and Lifecycle guide](/react/docs/state-and-lifecycle.html).