1

I'm reading about unknown-prop warnings in react, particularly because I'm using the react-bootstrap package and have stumbled upon them there.

i've read that: 'To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component', on here:

https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b

and an example is given for how the spread operator can be used to pull variables off props, and put the remaining props into a variable.

the example code:

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

Here is what the PROBLEM is: In the example given, I don't understand what the '...rest' in this code here stands for. I get that the '...' = spread syntax, but where did the word 'rest' come from and what does it stand for?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
user74843
  • 701
  • 2
  • 10
  • 28

2 Answers2

5

This is object rest operator, it creates an object from all properties that weren't explicitly destructured.

Note: since object rest/spread is still a stage 3 proposal, and requires a babel transform to work.

const obj = { a: 1, b: 2, c: 3};

const { a, ...everythingElse } = obj;

console.log(a);

console.log(everythingElse);

It's equivalent to array rest operator:

const arr = [1, 2, 3];

const [a, ...rest] = arr;

console.log(a);
console.log(rest);
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
1

Don't confuse rest operator (...) and spread operator (that is also ...):

'...' acts as a rest operator in the code below:

const { layout, ...rest } = props

but in the code below, '...' acts as a spread operator:

return <div {...rest} style={getHorizontalStyle()} />
Faly
  • 13,291
  • 2
  • 19
  • 37