Skip to content

Add a section about es6 object shorthand #9115

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.

Sign up for GitHub

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

Closed
wants to merge 2 commits into from
Closed

Add a section about es6 object shorthand #9115

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
122dd13
Add a section about es6 object shorthand
viankakrisna Mar 5, 2017
11b53ee
Add links to MDN and fix nits
viankakrisna Mar 12, 2017
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
26 changes: 26 additions & 0 deletions docs/docs/jsx-in-depth.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,32 @@ function App2() {

Spread attributes can be useful when you are building generic containers. However, they can also make your code messy by making it easy to pass a lot of irrelevant props to components that don't care about them. We recommend that you use this syntax sparingly.

### ES6 Object Shorthand

If you want to filter the props that you want to pass, you can do it by using ES6 Object Shorthand in combination with object spread operator and object destructuring assignment:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please link to MDN.


```js{4}
render(){
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: need space before {

const {myPropsOne, myPropsTwo} = this.props;
return (
<MyComponent {...{myPropsOne, myPropsTwo}} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use more realistic prop names than myPropsOne, myPropsTwo. Maybe onClick and value.

);
}
```
This is roughly equivalent to a code that looks like this:
```js{4}
render(){
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: need space before {

const spreadProps = {
myPropsOne: this.props.myPropsOne,
myPropsTow: this.props.myPropsTwo
};
return (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would just type props manually in the second example.

<MyComponent
  myPropsOne={this.myPropsOne} 
  myPropsTwo={this.myPropsTwo} />

<MyComponent {...spreadProps} />
);
}
```
So you can extract only the required props for `MyComponent`.

## Children in JSX

In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: `props.children`. There are several different ways to pass children:
Expand Down