Method parameter: destructuring + saving the original parameter (ReactJS component)

Question

Is there a way to achieve the destruction of the method parameter, but also be able to get the method parameter.

In the context of a React application with idle components, I would like to be able to replace

const MyComponent = (props) => { const {prop1, prop2} = props; return ( <div className={prop1 + '-' + prop2}> <Child {...props}/> </div> ) } 

with shorter syntax like

 const MyComponent = (props: {prop1, prop2}) ( <div className={prop1 + '-' + prop2}> <Child {...props}/> </div> ) 

Is there any syntax that is available?

Answer 1

If you define your component as function , you can use the arguments object:

 function MyComponent({ prop1, prop2 }) ( <div className={prop1 + '-' + prop2}> <Child {...arguments[0]}/> </div> ) 

Answer 2

we have the following:

 const MyComponent = ({ prop1, prop2, ...rest }) ( <div className={prop1 + '-' + prop2}> <Child prop1={prop1} prop2={prop2} {...rest} /> </div> )