Skip to content

Instantly share code, notes, and snippets.

@jsdf
Created August 2, 2015 22:57
Show Gist options
  • Save jsdf/40ed3e745fcc3b2f8fbb to your computer and use it in GitHub Desktop.
Save jsdf/40ed3e745fcc3b2f8fbb to your computer and use it in GitHub Desktop.
Private state in React Components
let UsernameField = (() => {
const _username = Symbol();
const _handleNameChange = Symbol();
return class UsernameField extends React.Component {
state = {
[_username]: 'DefaultUser',
}
[_handleNameChange] = (e) => {
this.setState({
[_username]: e.target.value,
});
}
render() {
return (
<input
value={this.state[_username]}
onChange={this[_handleNameChange]}
/>
);
}
}
})();
// UsernameField.js babel-transpiled, uglified then beautified
"use strict";
var UsernameField = function() {
var e = Symbol(), t = Symbol();
return function(r) {
function n() {
var r = this;
_classCallCheck(this, n), _get(Object.getPrototypeOf(n.prototype), "constructor", this).apply(this, arguments),
this.state = _defineProperty({}, e, "DefaultUser")[t] = function(t) {
r.setState(_defineProperty({}, e, t.target.value));
};
}
return _inherits(n, r), _createClass(n, [ {
key: "render",
value: function() {
return React.createElement("input", {
value: this.state[e],
onChange: this[t]
});
}
} ]), n;
}(React.Component);
}();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment