Spread attributes

An important feature is the spread attribute operator (...), which comes from the rest/spread properties for ECMAScript proposal, and is very convenient whenever we want to pass all the attributes of a JavaScript object to an element.

A common practice that leads to fewer bugs is not to pass entire JavaScript objects down to children by reference, but to use their primitive values, which can be easily validated, making components more robust and error-proof.

Let's see how it works:

  const attrs = { 
    id: 'myId',
    className: 'myClass'
  };
   
  return <div {...attrs} />;

The preceding code gets transpiled into the following:

  var attrs = { 
    id: 'myId',
    className: 'myClass'
  }; 

  return React.createElement('div', attrs);