19

Working with React.js and React Router:

import React, { Component } from 'react';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={} />
)

*{ component: Component, ...rest }*

...rest is the use of spread syntax but what does *component: Component* do?

Matthias Braun
  • 32,039
  • 22
  • 142
  • 171
Shorn Jacob
  • 1,183
  • 5
  • 22
  • 38
  • 1
    its creating an object. Its assigning the `Component` class imported from react to the key `component` in the newly created object. ie. `const newObj = { component: ComponentClass }` – agconti Aug 22 '18 at 02:18

1 Answers1

30

In ES6 this will assign the value to a new variable in this case named foo

let obj = {
  name: 'Some Name',
  age: '42',
  gender: 'coder'
};
let { name: foo, ...rest } = obj;
console.log({foo, rest}) // { foo: 'Some Name', rest: { age: 42, gender: 'coder' } }
//

In this case, name will not be defined

See assigning to new variable names

Suman Kundu
  • 1,702
  • 15
  • 22
  • is "foo" new value for key "name" OR new key name for "name" ? It's confusing. – vikramvi Mar 29 '21 at 05:44
  • @vikramvi here foo will be a variable containing the value "Some Name". – Suman Kundu Mar 30 '21 at 12:06
  • 3
    To further demonstrate the destructuring seen in this answer: The basic way to destructure in javascript is writing something like `let { name } = obj` which is the exact same thing as saying `let name = obj.name`. But you could also choose to "rename" or pick a different name altogether for the new variable you're unpacking. In this example where you see something like `let { name: foo } = obj` that is doing the same exact thing as `let foo = obj.name`. – Funka Jun 01 '22 at 16:45