Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions content/docs/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -215,8 +215,8 @@ class Page extends React.Component {
}

handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
this.setState(state => ({
showWarning: !state.showWarning
}));
}

Expand Down
6 changes: 3 additions & 3 deletions content/docs/faq-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ Passing an update function allows you to access the current state value inside t

```jsx
incrementCount() {
this.setState((prevState) => {
// Important: read `prevState` instead of `this.state` when updating.
return {count: prevState.count + 1}
this.setState((state) => {
// Important: read `state` instead of `this.state` when updating.
return {count: state.count + 1}
});
}

Expand Down
4 changes: 2 additions & 2 deletions content/docs/handling-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ class Toggle extends React.Component {
}

handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}

Expand Down
8 changes: 4 additions & 4 deletions content/docs/optimizing-performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -339,8 +339,8 @@ The simplest way to avoid this problem is to avoid mutating values that you are

```javascript
handleClick() {
this.setState(prevState => ({
words: prevState.words.concat(['marklar'])
this.setState(state => ({
words: state.words.concat(['marklar'])
}));
}
```
Expand All @@ -349,8 +349,8 @@ ES6 supports a [spread syntax](https://developer.mozilla.org/en-US/docs/Web/Java

```js
handleClick() {
this.setState(prevState => ({
words: [...prevState.words, 'marklar'],
this.setState(state => ({
words: [...state.words, 'marklar'],
}));
};
```
Expand Down
4 changes: 2 additions & 2 deletions content/docs/portals.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ class Parent extends React.Component {
// This will fire when the button in Child is clicked,
// updating Parent's state, even though button
// is not direct descendant in the DOM.
this.setState(prevState => ({
clicks: prevState.clicks + 1
this.setState(state => ({
clicks: state.clicks + 1
}));
}

Expand Down
16 changes: 8 additions & 8 deletions content/docs/reference-react-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -428,18 +428,18 @@ Think of `setState()` as a *request* rather than an immediate command to update
The first argument is an `updater` function with the signature:

```javascript
(prevState, props) => stateChange
(state, props) => stateChange
```

`prevState` is a reference to the previous state. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from `prevState` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`:
`state` is a reference to the component state at the time the change is being applied. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from `state` 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((state, props) => {
return {counter: state.counter + props.step};
});
```

Both `prevState` and `props` received by the updater function are guaranteed to be up-to-date. The output of the updater is shallowly merged with `prevState`.
Both `state` and `props` received by the updater function are guaranteed to be up-to-date. The output of the updater is shallowly merged with `state`.

The second parameter to `setState()` is an optional callback function that will be executed once `setState` is completed and the component is re-rendered. Generally we recommend using `componentDidUpdate()` for such logic instead.

Expand All @@ -466,11 +466,11 @@ 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:
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 current state, we recommend using the updater function form, instead:

```js
this.setState((prevState) => {
return {quantity: prevState.quantity + 1};
this.setState((state) => {
return {quantity: state.quantity + 1};
});
```

Expand Down
8 changes: 4 additions & 4 deletions content/docs/state-and-lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -359,18 +359,18 @@ To fix it, use a second form of `setState()` that accepts a function rather than

```js
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
```

We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) above, but it also works with regular functions:

```js
// Correct
this.setState(function(prevState, props) {
this.setState(function(state, props) {
return {
counter: prevState.counter + props.increment
counter: state.counter + props.increment
};
});
```
Expand Down
4 changes: 2 additions & 2 deletions content/home/examples/a-stateful-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ class Timer extends React.Component {
}

tick() {
this.setState(prevState => ({
seconds: prevState.seconds + 1
this.setState(state => ({
seconds: state.seconds + 1
}));
}

Expand Down
4 changes: 2 additions & 2 deletions content/home/examples/an-application.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ class TodoApp extends React.Component {
text: this.state.text,
id: Date.now()
};
this.setState(prevState => ({
items: prevState.items.concat(newItem),
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
Expand Down