Menu
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
387
Method 1: We can make a separate method for the event and call all the props method in that method. Method 2: We can create an anonymous function and call all the props method inside the anonymous method.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App. jsx'; ReactDOM. render(<App headerProp = "Header from props..." contentProp = "Content from props..."/>, document.
Use spread syntax:
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> Spread syntax (
...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
Source: MDN
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
