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 ...

Answer 2

Here is one other example in a more practical way. Suppose you have developed a very basic (for simplicity for this post) reusable <TextInput/> Component & want to reuse it over the whole application. The definition is like this.

function TextInput({htmlId, name, type="text", ...props}){
    return(
        <div>
            <input
                id={htmlId}
                name={name}
                type={type}
                {...props}
            />
        </div>
    )
}  

And here you are implementing the above component like this.

class ExampleOptional extends React.Component{
    render(){
        return(
            <TextInput
                htmlId="name"
                name="firstName"
                text="text"

                /** Props(place="XYZ & state="ABC") below are defined and destructured in TextInput 
                 Definition because there is {...props} defined in TextInput 
                 definition, if there is no {...props} in definition, no other than id, name & type 
                 props will be handled  */

                place="XYZ"
                state="ABC"
            />
        )
    }
}

So if you give anything apart from "htmlId, name & text" to TextInput as a prop, it will be get handled by {...props} which you defined in the TextInput component definition. Otherwise, it won't be there in the DOM of TextInput. (As you can see from the below picture, place & state props that were not defined in the original TextInput component definition gets handled automatically)

NOTE: Whether you have props destructured( {...props} ) or not, you will be able to find all your props passed in Chrome's Developer tools React's Component tab, but it does not have any impact on DOM or concerned element.

Answer 3

If {...props} has "custom" attribute, then custom the last value is "prop"(rightmost value).