Simple way of transmitting properties to component

Question

I have the following case:

 <ComponentA render={({propA, propB, propC}) => (
          <ComponentB
              propA={propA}
              propB={propB}
              propC={propC}
           />
 )}/>

In my real project, I have many more properties I want transmit to ComponentB. Is there a way to say "take all properties"?

I would like to have a shortcut to this so I don't have to copy paste all the attributes in this style. This seems like a very bad and unnecessary way of giving properties to a component.

Possible duplicate of [How to pass all other props to react class?](https://stackoverflow.com/questions/41534160/how-to-pass-all-other-props-to-react-class) — Emile Bergeron, Jul 26 '19 at 19:41

score 3 · Answer 1 · answered Jul 26 '19 at 19:35

3

Use the spread operator:

const MyComponent = ({destructuredProp, ...rest}) =>{
    return(
        <>
            <ChildA value={destructuredProp} />
            <ChildB {...rest} />
       </> 
   )
}

answered Jul 26 '19 at 19:35

Dupocas

20,285
6
38
56

score 2 · Accepted Answer · answered Jul 26 '19 at 19:31

2

Instead of destructuring the input you can use the spread operator

 <ComponentA render={(props) => (
          <ComponentB {...props} />
 )}/>

answered Jul 26 '19 at 19:31

Auskennfuchs

1,577
9
18

Simple way of transmitting properties to component

2 Answers2