CODEWITHSUNDEEP
reactjs
JuMoGar
JuMoGar

Reputation: 1760

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

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.

Upvotes: 3

Views: 3420

Answers (1)

Michael Jasper
Michael Jasper

Reputation: 8058

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

Upvotes: 6

Related Questions