assignment inside subclass declaration - React.Component

Question

I'm going through Egghead's React tutorial and in one of the lessons I found the following class declaration:

class StopWatch extends React.Component {
        state = {lapse: 0, running: false}

        render() {
            const {lapse, running} = this.state
            const buttonStyles = {
                border: '1px solid #ccc',
                background: '#fff',
                fontSize: '2em',
                padding: 15,
                margin: 5,
                width: 200
            }
            return (
                <div style={{textAlign: 'center'}}>
                    <label style={{fontSize: '5em', display: 'block'}}>
                        {lapse}ms
                    </label>
                    <button style={buttonStyles}>{running ? 'Stop' : 'Start'}</button>
                    <button style={buttonStyles}>Clear</button>
                </div>
            )

        }
    }

So looking at the code, I was just curious about that assignment on the top. I looked at the class and extends documentations on MDN and it doesn't say anything about allowing an assignment inside a class declaration.

Furthermore, I tried it on a sample code and it's throwing an error:

class Square {
        constructor(prop1, prop2) {
            this.prop1 = prop1
            this.prop2 = prop2
        }
    }

    class Polygon extends Square {
        constructor(prop1, prop2, prop3) {
            super(prop1, prop2)
        }
        prop2 = prop3
        render() {
            console.log(prop2)
        }
    }

So... why does it work?

check this [diff between state = {} and constructor(){....}](https://stackoverflow.com/questions/45451141/what-is-the-difference-between-using-constructor-vs-state-to-declare-state) — Mayank Shukla, Apr 05 '18 at 05:46
The problem is: in your test `prop2` is the property of class so try accessing `this.prop2` from `render`. Also, what is `prop3`outside the constructor? — Tolsee, Apr 05 '18 at 05:47

score 1 · Accepted Answer · answered Apr 05 '18 at 06:56

The subclass uses class fields which are stage 3 proposal and aren't a part of existing standard. They provide syntactic sugar for constructor body. As explained in this question, there's a specific order in which class field assignments are performed.

The subclass is identical to this ES6 class (check also Babel output to get some ideas what's going on):

class Polygon extends Square {
    constructor(prop1, prop2, prop3_that_doesnt_collide) {
        super(prop1, prop2);
        this.prop2 = prop3;
    }

    render() {
        console.log(prop2)
    }
}

console.log(prop2) refers to non-existing prop2 variable and not prop2 property.

Notice that because prop3 was located outside constructor method, it doesn't refer to prop3 constructor parameter but to some non-existing prop3 variable, so prop3_that_doesnt_collide parameter and prop3 don't collide.

Since prop2 assignment relies on constructor parameter, it should be placed inside constructor method:

class Polygon extends Square {
    constructor(prop1, prop2, prop3) {
        super(prop1, prop2);
        this.prop2 = prop3;
    }

    render() {
        console.log(this.prop2)
    }
}

Since it just immediately replaces prop2 value with prop3, it can be:

constructor(prop1, prop2, prop3) {
    super(prop1, prop3);
}

score 0 · Answer 2 · answered Apr 05 '18 at 05:50

0

The syntax you're trying to use is not standardized and you'll need Babel to transpile your code. Alternatively you can use static members in classes -

let Foo = class {
  static get staticData() {
    return 'Static Data';
  }
}

console.log(Foo.staticData);

answered Apr 05 '18 at 05:50

Shobhit Chittora

1,209
8
13

Surprisingly, you'll need Babel to develop React because of JSX :) – Estus Flask Apr 05 '18 at 06:37

assignment inside subclass declaration - React.Component

2 Answers2