Spread attributes on dom about react-bits HOT 2 CLOSED

I think you're getting confused as the examples on the JSX Spread page contradict the anti-pattern. Spreading to HTML elements is actually a very handy feature for being able to pass through props as HTML attributes which, from my point of view, you don't wan't to add to your component properties. A good example is a TextField component: you want it to have a specific set of component defined attributes (type="text" autocomplete="off" ...), but also support all other HTML attributes. For this to work, spread first in the HTML element, then add yours to the right, which will override props before.

The actual anti-pattern is to not spread props passed into a component which don't belong to HTML. To handle such cases, I usually use a function "omitOwnProps(this)" and spread the return value. The function reads the static defaultProps and creates an object that takes the supplied props and omits all properties from defaultProps (needs a different form for stateless components).

from react-bits.

Thanks for the explanation. I was surely confused because spread props on components is the heart of react. Second scenario, spread props on HTML can be handy but it is up to us to ensure properties are valid.

from react-bits.