What does {...props} in this React Component mean?

Question

Just starting out with react-router.

I'm using react-router@next (version 4) when I came across this bit of code in github (at the bottom). I have weak React + ES6-fu thus require your help.

1. Does {...props} here refer to sending props to the component?
2. How does {...props} here impact custom="prop"?

z

<Match pattern="/foo" 
       render={(props) => ( 
         <YourRouteComponent {...props} custom="prop"/> 
       )} 
/>

Answer 1

consider the below example:

props = {
    propA: "valueA",
    propB: "valueB",
    propC: "valueC"
};

then,

<SomeComponent {...props} />

is equivalent to

<SomeComponent propA="valueA" propB="valueB" propC="valueC" />

---

<SomeComponent {...props} propC="someOtherValue" />

equivalent to

<SomeComponent propA="valueA" propB="valueB" propC="someOtherValue" />

---

Also please note that

<SomeComponent propC="someOtherValue" {...props} />

will become

<SomeComponent propA="valueA" propB="valueB" propC="valueC" />

The order is important.

Read more on JSX Spread Operator ...