JavaScript by Example

Adding new tasks

Our final step in the app is to allow users to add a new task. Let's make it simple by adding a new task on hitting Enter or return on the keyboard. To detect the Enter button, we need to use an attribute on the input field similar to onChange, but it should happen before the onChange event. onKeyUp is one such attribute that gets called when the key is pressed and released by the user on the keyboard. It also happens before the onChange event. First create the method that will handle the keyup process:

class App extends Component {  constructor() {    ...    this.handleKeyUp = this.handleKeyUp.bind(this);  }  handleKeyUp(event) {    if(event.keyCode === 13) {          if(this.state.inputValue) {         const newTasks = [...this.state.tasks, this.state.inputValue]; ...