Sarasota Sun Sarasota Sun - 3 months ago 37
React JSX Question

React, ES6 - getInitialState was defined on a plain JavaScript class

I have the follow component (

radioOther.jsx
):

'use strict';

//module.exports = <-- omitted in update

class RadioOther extends React.Component {

// omitted in update
// getInitialState() {
// propTypes: {
// name: React.PropTypes.string.isRequired
// }
// return {
// otherChecked: false
// }
// }

componentDidUpdate(prevProps, prevState) {
var otherRadBtn = this.refs.otherRadBtn.getDOMNode();

if (prevState.otherChecked !== otherRadBtn.checked) {
console.log('Other radio btn clicked.')
this.setState({
otherChecked: otherRadBtn.checked,
});
}
}

onRadChange(e) {
var input = e.target;
this.setState({
otherChecked: input.checked
});
}

render() {
return (
<div>
<p className="form-group radio">
<label>
<input type="radio"
ref="otherRadBtn"
onChange={this.onRadChange}
name={this.props.name}
value="other"/>
Other
</label>
{this.state.otherChecked ?
(<label className="form-inline">
Please Specify:
<input
placeholder="Please Specify"
type="text"
name="referrer_other"
/>
</label>)
:
('')
}
</p>
</div>
)
}
};


Prior to using ECMAScript6 all was well, now I am getting 1 error, 1 warning and I have a followup question:


Error: Uncaught TypeError: Cannot read property 'otherChecked' of null

Warning: getInitialState was defined on RadioOther, a plain JavaScript class. This is only supported for classes created using
React.createClass. Did you mean to define a state property instead?






  1. Can anyone see where the error lies, I know it is due to the conditional statement in the DOM but apparently I am not declaring its initial value correctly?

  2. Should I make getInitialState static

  3. Where is the appropriate place to declare my proptypes if getInitialState is not correct?



UPDATE:

RadioOther.propTypes = {
name: React.PropTypes.string,
other: React.PropTypes.bool,
options: React.PropTypes.array }

module.exports = RadioOther;


@ssorallen, this code :

constructor(props) {
this.state = {
otherChecked: false,
};
}


produces
"Uncaught ReferenceError: this is not defined"
, and while below corrects that

constructor(props) {
super(props);
this.state = {
otherChecked: false,
};
}


but now, clicking the other button now produces error:

Uncaught TypeError: Cannot read property 'props' of undefined

Answer
  • getInitialState is not used in ES6 classes. Instead assign this.state in the constructor.
  • propTypes should be assigned to the class not the instances.
  • Member methods are not "auto-bound" in ES6 classes. For methods used as callbacks, either bind them in place or assign bound instances in the constructor as this.callback = this.callback.bind(this);.

See more in the React blog post about ES6 classes: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

class RadioOther extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      otherChecked: false,
    };

    // Bind callback methods to make `this` the correct context.
    this.onRadChange = this.onRadChange.bind(this);
  }

  onRadChange() {
    ...
  }

  ...

}

RadioOther.propTypes = {
  name: React.PropTypes.string.isRequired,
};

module.exports = RadioOther;
Comments