Method parameter: destructuring + keeping original parameter (ReactJS component)

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?

such a syntax doesn't exist, to my knowledge – Mulan Nov 24 '16 at 19:59 — Mulan, Nov 24 '16 at 19:59

yadhu · Answer 1 · 2016-11-24T16:10:16.193

2

we have this:

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

edited Nov 24 '16 at 16:10

answered Nov 24 '16 at 16:09

yadhu

15,423
7
32
49

@free-soul, thanks for editing, but it's not really more concise than the initial implementation, and become less concise if I destructure more parameters – Sebastien Lorber Nov 24 '16 at 16:11
that's right, I concur. – yadhu Nov 24 '16 at 19:07

score 2 · Answer 2 · answered Nov 24 '16 at 16:10

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>
)

answered Nov 24 '16 at 16:10

madox2

49,493
17
99
99

4

That's a nice idea, but isn't there something more idiomatic we can do? – Sebastien Lorber Nov 24 '16 at 16:11

Method parameter: destructuring + keeping original parameter (ReactJS component)

2 Answers2