What does mean '...props' in ReactJS?

Question

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.

Answer 1

... 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'};