ES6 destructure and spread together as arguments into a React Component

Question

I understand ES6 destructure and spread operators, but I am confused by their usage together. Can someone break this down into a way a layman can understand?

const index = ({title, description, ...props}) => {
  return (
    <div>
      
    </div>
  )
}

How does this work?

That's not spread, it's *rest syntax* - part of the destructuring syntax. It collects "everything else" into `props` - in this case, anything that is not `title` or `description` — VLAZ, Oct 22 '20 at 13:26
See [rest in object destructuring on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Rest_in_Object_Destructuring) — trincot, Oct 22 '20 at 13:27
From the MDN link above: `let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; //rest = { c: 30, d: 40 }` — AJSwift, Oct 22 '20 at 20:54

Yury Tarabanko · Accepted Answer · 2020-10-22T14:31:18.177

1

Something like this. Where everythingElseExceptTitleAndDescription creates a new object with all enumerable own properties of the argument except title and description

const index = (arg) => {
  let title = arg.title;
  let description = arg.description;
  let props = everythingElseExceptTitleAndDescription(arg);
  return (
    <div>
      
    </div>
  )
}

edited Oct 22 '20 at 14:31

answered Oct 22 '20 at 13:26

Yury Tarabanko

44,270
9
84
98

ES6 destructure and spread together as arguments into a React Component

1 Answers1