Created
April 3, 2018 16:00
-
-
Save kentcdodds/d73a2e679d32fd10af03b1c0106997fc to your computer and use it in GitHub Desktop.
Example of using class fields
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Use class fields! | |
// https://github.com/tc39/proposal-class-fields | |
// Here's what you might be doing today... | |
class A extends B { | |
constructor(...args) { | |
super(...args) | |
this.foo = 'bar' | |
this.foobar = `${this.foo}bar` | |
} | |
} | |
// this has the exact same semantics as the above example! | |
class A extends B { | |
foo = 'bar' | |
foobar = `${this.foo}bar` | |
} | |
// Here's a more practical react example: | |
const incrementCount = ({count}) => ({count: count + 1}) | |
class Counter extends React.Component { | |
static defaultProps = {initialCount: 0} | |
state = { | |
count: this.props.initialCount | |
} | |
handleClick = () => this.setState(incrementCount) | |
render() { | |
return ( | |
<button onClick={this.handleClick}> | |
{this.state.count} | |
</button> | |
) | |
} | |
} | |
// Photo by Sandro Katalina on Unsplash | |
// example by @kentcdodds |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment