The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

tempusfugit (144) [Avatar] Offline
#1
Page 52:
With the switch to JavaScript classes, however, we need to bind our methods ourselves.
More recently the use of Property Initializers with arrow functions have come into favour. They are rolled into the Class field declarations for JavaScript proposal and are a candidate for inclusion in ES2019.

// i.e. CreateComment.js aka "module CreateComment"

const initialState = () => ({
  content: '',
  user: ''
});

class CreateComment extends Component {
  constructor(props) {
    super(props);
    this.state = initialState();
  }

  handleUserChange = (event) => {
    const val = event.target.value;
    this.setState(() => ({ user: val }));
  };

  handleTextChange = (event) => {
    const val = event.target.value;
    this.setState(() => ({ content: val }));
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.setState(initialState);
  };

  render() {
    return React.createElement(
      'form',
      {
        className: 'createComment',
        onSubmit: this.handleSubmit
      },
      React.createElement( 'input', {
        type: 'text',
        placeholder: 'Your name',
        value: this.state.user,
        onChange: this.handleUserChange
      }),
      React.createElement( 'input', {
        type: 'text',
        placeHolder: 'Thoughts?',
        value: this.state.content,
        onChange: this.handleTextChange
      }),
      React.createElement( 'input', {
        type: 'submit',
        value: 'Post'
      })
    );
  }
}
CreateComment.propTypes = {
  content: PropTypes.string
};

// export default CreateComment;