Method parameter: destructuring + keeping original parameter (ReactJS component) [duplicate]

Question

is there any way to achieve method parameter destructuring, but also be able to get method parameter.

In the context of a React application with stateless components, I'd like to be able to replace

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

with a more concise syntax like

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

Is there any syntax like that available?

Answer 1

we have this:

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

Answer 2

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

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