Nothing displayed with this excercice

JavaScript
1

Hello,
Add Event Listeners
Here is the correct code but nothing is displayed.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ''
    };
    this.handleEnter = this.handleEnter.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }
  // Change code below this line
  componentDidMount() {
document.addEventListener('keydown', this.handleKeyPress);
  }
  componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyPress)
  }
  // Change code above this line
  handleEnter() {
    this.setState((state) => ({
      message: state.message + 'You pressed the enter key! '
    }));
  }
  handleKeyPress(event) {
    if (event.keyCode === 13) {
      this.handleEnter();
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
};

What’s wrong ?

2

The state message starts out as an empty string, so nothing is shown. If you change focus to the preview (click in it) and then hit the enter/return key on your keyboard, the state will update.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.