Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix: spread syntax is not an operator. But react document saying that… #4209

Merged
merged 1 commit into from
Jan 18, 2022
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
2 changes: 1 addition & 1 deletion beta/src/pages/blog/2014/10/28/react-v0.12.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl

#### New Features {/*new-features*/}

- Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo`
- Spread syntax (`{...}`) introduced to deprecate `this.transferPropsTo`
- Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`

#### Deprecations {/*deprecations*/}
Expand Down
2 changes: 1 addition & 1 deletion beta/src/pages/blog/2015/02/24/react-v0.13-rc1.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
- `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
- `es5` is the default.
- `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
- The transform for the call spread operator has also been enabled.
- The transform for the call spread syntax has also been enabled.

### JSX {/*jsx*/}

Expand Down
2 changes: 1 addition & 1 deletion beta/src/pages/blog/2015/03/10/react-v0.13.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
- `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
- `es5` is the default.
- `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
- The transform for the call spread operator has also been enabled.
- The transform for the call spread syntax has also been enabled.

### JSX {/*jsx*/}

Expand Down
8 changes: 4 additions & 4 deletions beta/src/pages/learn/updating-arrays-in-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ button { margin-left: 5px; }

</Sandpack>

The array spread operator also lets you prepend an item by placing it *before* the original `...artists`:
The array spread syntax also lets you prepend an item by placing it *before* the original `...artists`:

```js
setArtists([
Expand Down Expand Up @@ -334,7 +334,7 @@ button { margin: 5px; }

### Inserting into an array {/*inserting-into-an-array*/}

Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread operator together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array.
Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread syntax together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array.

In this example, the Insert button always inserts at the index `1`:

Expand Down Expand Up @@ -398,7 +398,7 @@ button { margin-left: 5px; }

### Making other changes to an array {/*making-other-changes-to-an-array*/}

There are some things you can't do with the spread operator and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly.
There are some things you can't do with the spread syntax and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly.

**However, you can copy the array first, and then make changes to it.**

Expand Down Expand Up @@ -442,7 +442,7 @@ export default function List() {

</Sandpack>

Here, you use the `[...list]` spread operator to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`.
Here, you use the `[...list]` spread syntax to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`.

However, **even if you copy an array, you can't mutate existing items _inside_ of it directly**. This is because copying is shallow--the new array will contain the same items as the original one. So if you modify an object inside the copied array, you are mutating the existing state. For example, code like this is a problem.

Expand Down
2 changes: 1 addition & 1 deletion beta/src/pages/learn/updating-objects-in-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -1123,7 +1123,7 @@ select { margin-bottom: 10px; }

The problem was in the mutation inside `handleMove`. It mutated `shape.position`, but that's the same object that `initialPosition` points at. This is why both the shape and the background move. (It's a mutation, so the change doesn't reflect on the screen until an unrelated update--the color change--triggers a re-render.)

The fix is to remove the mutation from `handleMove`, and use the spread operator to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.
The fix is to remove the mutation from `handleMove`, and use the spread syntax to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.

<Sandpack>

Expand Down
2 changes: 1 addition & 1 deletion content/blog/2014-10-28-react-v0.12.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl

#### New Features {#new-features}

* Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo`
* Spread syntax (`{...}`) introduced to deprecate `this.transferPropsTo`
* Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`

#### Deprecations {#deprecations}
Expand Down
2 changes: 1 addition & 1 deletion content/blog/2015-02-24-react-v0.13-rc1.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
* `es5` is the default.
* `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
* The transform for the call spread operator has also been enabled.
* The transform for the call spread syntax has also been enabled.


### JSX {#jsx}
Expand Down
2 changes: 1 addition & 1 deletion content/blog/2015-03-10-react-v0.13.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
* `es5` is the default.
* `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
* The transform for the call spread operator has also been enabled.
* The transform for the call spread syntax has also been enabled.


### JSX {#jsx}
Expand Down
4 changes: 2 additions & 2 deletions content/docs/jsx-in-depth.md
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ In general, we don't recommend *not* passing a value for a prop, because it can

### Spread Attributes {#spread-attributes}

If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" syntax to pass the whole props object. These two components are equivalent:

```js{7}
function App1() {
Expand All @@ -244,7 +244,7 @@ function App2() {
}
```

You can also pick specific props that your component will consume while passing all other props using the spread operator.
You can also pick specific props that your component will consume while passing all other props using the spread syntax.
harish-sethuraman marked this conversation as resolved.
Show resolved Hide resolved

```js{2}
const Button = props => {
Expand Down
2 changes: 1 addition & 1 deletion content/warnings/unknown-prop.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function MyDiv(props) {
}
```

**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable.
**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable.

```js
function MyDiv(props) {
Expand Down