score:14

Accepted answer

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

score:-2

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

score:0

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)

enter image description here

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.


Related Query

More Query from same tag