In a hierarchy of components, parent components pass properties to their children. They may specify explicit values. They may, as well, forward their own properties.

In our render -function, we render the <Parent/> -component that returns (thus renders) the <Component/> that returns a <div/> . The <Parent/> passes to the <Component/> :

the text it receives in its own props

it receives in its own a style (this is a React inline style specifies as a JavaScript-object whose keys use the camelCased version of a CSS style name)

“But wait! This example does not work. The style does not work!”

Of course, it doesn’t. The <Component/> does not forward the style -property it receives to the <div/> it renders. It would be quite cumbersome to manually forward all supported HTML-attributes to the <div/> . There are the style , children , many HTML event handlers (for example onClick ), and many more.

Fortunately, JavaScript provides the Spread syntax. This syntax (for example ...props ) expands an object to a list of key-value pairs. You don’t need to know the keys.