@ -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.
- `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
- `es5` is the default.
- `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).
- `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.
@ -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.
- `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
- `es5` is the default.
- `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).
- `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.
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
```js
setArtists([
setArtists([
@ -334,7 +334,7 @@ button { margin: 5px; }
### Inserting into an array {/*inserting-into-an-array*/}
### 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`:
In this example, the Insert button always inserts at the index `1`:
@ -398,7 +398,7 @@ button { margin-left: 5px; }
### Making other changes to an array {/*making-other-changes-to-an-array*/}
### 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.**
**However, you can copy the array first, and then make changes to it.**
@ -442,7 +442,7 @@ export default function List() {
</Sandpack>
</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.
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.
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 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.
@ -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.
* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
* `es5` is the default.
* `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).
* `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.
@ -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.
* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
* `es5` is the default.
* `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).
* `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.
@ -231,7 +231,7 @@ In general, we don't recommend *not* passing a value for a prop, because it can
### Spread Attributes {#spread-attributes}
### 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}
```js{7}
function App1() {
function App1() {
@ -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.