javascript - How to pass all other props to react class?

Question

Say I have 3 props that my class based component requires and implements i.e.

<Component propOne={this.props.one} propTwo={this.props.two}>
  {this.props.children}
</Component>

how would I pass down any other props that I originally don't expect, but say someone else using my component would want to use?

I was thinking

<Component propOne={this.props.one} propTwo={this.props.two} {...this.props} >
  {this.props.children}
</Component>

But am concerned about prop duplication

question from:https://stackoverflow.com/questions/41534160/how-to-pass-all-other-props-to-react-class

Answer 1

Use the spread operator

const {propOne, propTwo, ...leftOver} = this.props;
// `leftOver` contains everything except `propOne` and `propTwo`

So your example would become:

const {propOne, propTwo, children, ...props} = this.props;
<Component propOne={propOne} propTwo={propTwo} {...props}>
  {children}
</Component>