React js call to a function when enter key is pressed

Question

Here is a snippet from my react js app:

<form className="rcw-sender" onKeyDown={(e)=> e.keyCode == 13 ? {sendMessage}: ''} onSubmit={sendMessage}>
  {this.state.active && <Container>
    <EmojiPicker />
  </Container>}
  <button className="rcw-send" onClick={activateEmoji}>
    <img src={emojibutton} className="rcw-send-icon" alt="send" />
  </button>
  <button className="rcw-send" onClick={activateMenu}>
    <img src={menubutton} className="rcw-send-icon" alt="send" />
  </button>

  <input type="text" className="rcw-new-message" name="message" placeholder={placeholder} disabled={disabledInput}
    autoFocus={autofocus} autoComplete="off" ref={this.input} />
  <button type="submit" className="rcw-send">
    <img src={send} className="rcw-send-icon" alt="send" />
  </button>
</form>

In my form onSubmit={sendMessage} is called when I press the submit button and this much works perfectly. But I want the same sendMessage to be invoked when I submit the form by pressing enter key. To do this I have this code onKeyDown={(e)=> e.keyCode == 13 ? {sendMessage}: ''} from which I want the sendMessage method to be invoked on pressing the enter key but it doesn't seem to work. I want to do this because I have an emoji picker in my app and when I submit the form using enter key in that case the emoji picker show's up. So to fix this I want to invoke the sendMessage method when I press the enter key to submit the form. Submitting the form using the submit button doesn't toggle the state of the emoji picker. That's why as a quick fix to the problem I want to invoke sendMessage method when I press enter key. How do I do it?

Answer 1

Try to move your onKeyDownHandler to separate function and just add if statement

  onKeyDownHandler = e => {
    if (e.keyCode === 13) {
      this.sendMessage();
    }
  };

  render() {
    ... your other code
    return (
      <form
        className="rcw-sender"
        onKeyDown={this.onKeyDownHandler}
        onSubmit={sendMessage}
      >
        {this.state.active && (
          <Container>
            <EmojiPicker />
          </Container>
        )}
        <button className="rcw-send" onClick={activateEmoji}>
          <img src={emojibutton} className="rcw-send-icon" alt="send" />
        </button>
        <button className="rcw-send" onClick={activateMenu}>
          <img src={menubutton} className="rcw-send-icon" alt="send" />
        </button>

        <input
          type="text"
          className="rcw-new-message"
          name="message"
          placeholder={placeholder}
          disabled={disabledInput}
          autoFocus={autofocus}
          autoComplete="off"
          ref={this.input}
        />
        <button type="submit" className="rcw-send">
          <img src={send} className="rcw-send-icon" alt="send" />
        </button>
      </form>
    );
  }