javascript - What do these three dots in React do? -

what ... in react (using jsx) code , called?

<modal {...this.props} title='modal heading' animation={false}> 

those jsx spread attributes:

spread attributes

if have props object, , want pass in jsx, can use ... "spread" operator pass whole props object. these 2 components equivalent:

function app1() {   return <greeting firstname="ben" lastname="hector" />; }  function app2() {   const props = {firstname: 'ben', lastname: 'hector'};   return <greeting {...props} />; } 

spread attributes can useful when building generic containers. however, can make code messy making easy pass lot of irrelevant props components don't care them. recommend use syntax sparingly.

that documentation used mention although (for now) jsx thing, there's proposal add object rest , spread properties javascript itself. (javascript has had rest , spread arrays since es2015, not object properties.) of april 2017, proposal @ stage 3, , hasn't made soon-to-be-released es2017 specification. won't clear few months whethr it'll advance enough make es2018; 1 hopes so. (more stages here.) transpilers have supported time (even separately jsx).

---

side note: although jsx quote above talks "spread operator," ... isn't operator, , can't be. operators have single result value. ... primary syntax (kind of () used for aren't grouping operator, though it).