ES6 destructure and spread together as arguments into a React Component [duplicate]

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
– VLAZ, Commented Oct 22, 2020 at 13:26
From the MDN link above: let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; //rest = { c: 30, d: 40 } — AJSwift
– AJSwift, Commented Oct 22, 2020 at 20:54

Yury Tarabanko · Accepted Answer · 2020-10-22 14:31:18Z

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, 2020 at 14:31

answered Oct 22, 2020 at 13:26

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ES6 destructure and spread together as arguments into a React Component [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related