-1

There is something common that sometimes we all do. Wrap dom elements in custom components

<CustomComponet id="abc" title="abc" nonDomProp="abc" ...andsoforth />

Custom component in this example wraps button which has the properties id and title but not nonDomProp so I get a warning which makes sense because nonDomProp doesn't exist in the wrapped button DOM element and I am just passing all props to the button DOM element with the spread operator <button {...props} />

One way to solve this is by manually passing only the props that button will use, but I was wondering if there is a way to tell the spread operator to use all the passed ...props but to ignore nonDomProp.

I have tried to do a Google search and I have not been able to find what I am looking for so I thought maybe SO would point me in the right direction.

Helmut Granda
  • 4,565
  • 7
  • 35
  • 51

1 Answers1

1

You can destructure the props object with this:

const { nonDomProp, ...propsButton } = props;
return(
 <button {...propsButton} />
)

Or directly from the argument of the CustomComponent function:

const CustomComponent = ({ nonDomProp, ...props }) => {
...
return(
 <button {...props} />
)
}

Docs: https://github.com/tc39/proposal-object-rest-spread#rest-properties

Hakim Abdelcadir
  • 1,231
  • 4
  • 15
  • I need to read on this but if I understand this correctly ```{ nonDomProp, ...props }``` is it just filtering out ```nonDomProp```? Either way, thanks so much for the quick response! I hope this helps others as well! – Helmut Granda Jun 04 '22 at 19:17
  • Found it in the link you provided *Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern.* – Helmut Granda Jun 04 '22 at 20:53