What's ES6 magic is happening in this React Component?

Question

I'm following this tutorial https://serverless-stack.com/ and am on https://serverless-stack.com/chapters/create-a-route-that-redirects.html

This introduces an AuthenticatedRoute which checks the value of a prop called isAuthenticated to decide weather or not to render the component or redirect the user to login

import React from "react";
import { Route, Redirect } from "react-router-dom";

export default ({ component: C, props: cProps, ...rest }) =>
  <Route
    {...rest}
    render={props =>
      cProps.isAuthenticated
        ? <C {...props} {...cProps} />
        : <Redirect
            to={`/login?redirect=${props.location.pathname}${props.location
              .search}`}
          />}
  />;

I get what it achieves, but I'm unsure as to how it's doing it.

Can someone explain to me what's going on with the following bits please?

component: C
...rest
<C {...props} {...cProps} />

Here's a good place to start: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator — StudioTime, Sep 18 '17 at 11:46
Possible duplicate of [Spread Operator ES6](https://stackoverflow.com/questions/34559918/spread-operator-es6) — Salketer, Sep 18 '17 at 11:47

Ori Drori · Accepted Answer · 2017-09-18T12:00:01.200

The AuthenticatedRoute is a Functional (stateless) component - a function.

The component is invoked with the props as the 1st argument, and this line ({ component: C, props: cProps, ...rest }) destructures the props, and assign some of them to variables. The component: C extract the component property from the props object, and assigns it to variable C.
The ...rest in ({ component: C, props: cProps, ...rest }) is part of the ECMAScript's Object Rest/Spread Properties proposal, and you need babel's Object rest spread transform for it to work in current browsers. It creates a new object from all the object properties that weren't assigned to variables (the rest).
The <C {...props} {...cProps} /> is react's JSX spread attributes, and it converts all the object (props and cProps) properties to component attributes (like writing key=value). Props in cProps will override the properties of props because they appear after them.

score 3 · Answer 2 · answered Sep 18 '17 at 12:12

component: C - In ES6 you can have default initialisation in case the parameter is not passed. Here component will be defaulted to C.

...rest- With ES6 you can spread the element of a data structure. Here rest may have the route path for the render function.

- Each element of cprops and props is passed as attribute to C component. Props in cProps will override the properties of props as they appear after them.

score 1 · Answer 3 · answered Sep 18 '17 at 12:07

In this case Authenticated Route is that is called High Order Component. Authenticated Route wrap your Route component and conditionally return component: C if user is authenticated or Redirect component.

component its a simple props of Authenticated Route but its renamed to C in cause that react component must be capitalized.
props: cProps its a props you want to receive to the component
props its a Route render props that needs to be applied to the component, which the render method should return
...rest its an object which contain any other props, basically refer to the Route
About { ...someData } you have been answered above in comments

Then you can simply wrap use <AuthenticatedRoute /> and pass props you need according to the information written above

What's ES6 magic is happening in this React Component?

3 Answers3