3

What means ...props? the code is:

export default class NavItem extends React.Component {
constructor() {
    super();
}

render() {
    const { router, index, to, children, ...props } = this.props;
    let isActive = false;

    if (router.isActive('./', true) && index) {
        isActive = true

children I suppose that is the children of the actual element, but ...props what does it mean?

Thank you.

JuMoGar
  • 1,740
  • 2
  • 19
  • 46
  • 2
    Possible duplicate of [What does the three dots in react do?](http://stackoverflow.com/questions/31048953/what-does-the-three-dots-in-react-do) – Anthony Kong Apr 20 '17 at 02:25
  • `const { children, ...props } = this.props;` means assign props.children to children, all the rest values of this.props - to props. – elmeister Apr 20 '17 at 02:29

1 Answers1

6

... used in this context is referred to as "the rest" parameter, as in "the rest of them"

This line is using object Destructuring assignment syntax to assign from the object this.props new variables router, index, to and children, and everything else (the rest of them) in this.props into props

const { router, index, to, children, ...props } = this.props;

Here is another example of it's usage:

const bigBird = {height: 'tall', color: 'yellow', disposition: 'sunny'};
const {height, ...others} = bigBird;
//height == 'tall'
//others == {color: 'yellow', disposition: 'sunny'};
Michael Jasper
  • 7,962
  • 4
  • 40
  • 60