Is there a React shorthand for passing props?

Question

I am tired of doing this all the time:

<Elem x={x} y={y} z={z} /> <Elem x={this.props.x} y={this.props.y} z={this.props.z} /> 

Is there a way I can get something like this to work?

<Elem x, y, z /> 

or

<Elem {x, y, z} /> 

Answer 1

If your variables are contained in an object, such as this.props, you spread the object:

<Elem {...this.props} /> 

Otherwise, you spread a new object containing the variables you need:

<Elem {...{ x, y, z }} />