Spread attributes

Shawn learned a lot of things about JSX but when he was reflecting on the previous steps, he came up with another question.

"Mike, as of now we are just passing two props to the App component: headings and changesets. However, tomorrow these props can increase to any number. Passing them one by one would be cumbersome. Especially, when we have to pass some data from the recent changes API directly. It will be hard to a keep track of the structure of the incoming data and pass it accordingly in the props. Is there a better way?"

"Another excellent question, Shawn. True, it might be cumbersome passing a large number of attributes to the component one by one. But we can solve this using the spread attributes."

var props = { headings: headings, changeSets: data, timestamps: timestamps };
ReactDOM.render(<App {...props } />, 
                     document.getElementById('container'));

"In this case, all the properties of object are passed as props to the App component. We can pass any object that can contain any number of key value pairs and all of them will be passed as props to the component" explained Mike.

"Very cool. Is the (…) operator present only in JSX?"

"Nope. It is actually based on the spread attribute feature in ES2015, which is the next JavaScript standard. ES2015, or ES6 as it is called, introduces some new features in JavaScript language and React is taking advantage of these developing standards in order to provide a cleaner syntax in JSX" added Mike.

Note

ES2015 already supports spread operator for arrays at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator. There is also a proposal for objects at https://github.com/sebmarkbage/ecmascript-rest-spread.

"Not only this, spread attributes can be used multiple times or it can be combined with other attributes. The order of the attributes is important though. Newer attributes override previous ones."

var data = [{ "when": "2 minutes ago",
              "who": "Jill Dupre",
              "description": "Created new account"
            },
            {
              "when": "1 hour ago",
              "who": "Lose White",
              "description": "Added fist chapter"
            }];
var headings = ['When', 'Who', 'Description'];

var props = { headings: headings, changeSets: data };

ReactDOM.render(<App {...props} headings = {['Updated at ', 'Author', 'Change']} />, document.getElementById('container'));

"Instead of showing When, Who, and Description, Updated at, Author, and Change will be shown as the headings in this case" Mike explained.

Note

ES2015 or ES6 is the latest version JavaScript standard. It has a lot of features, which are used by React, similar to the spread attributes. We will be using lot more ES2015 or ES6 code in the upcoming chapters.