Why onKeyDown event has no effect in React app?

Question

I added an onKeyDown event handler input in React functional component. The app needs to redirect when Done or Return on virtual iOS / mobil keyboard is pressed, but it does not happen. Why? What is the problem with my implementation?

Used this tutorial to add keyboard listener.

<input
  className={`${classes.borderedInput} ${classes.middleFont}`}
  placeholder={sm ? "events" : "city or place"}
  onFocus={deletePlaceholder}
  onBlur={e => makePlaceholder(e, sm ? "events" : "city or place")}
  onKeyDown={keyPress}
/>

const keyPress = e => {
  if (e.keyCode == 13) {
    this.props.history.push("/ongoingEventList");
  }
};

Answer 1

You are using a functional component and in the keyPress handler, you are using this.

So just do

props.history.push("/ongoingEventList");

Full Example

const KeyPressDemo = props => {
  const keyPress = e => {
    if (e.keyCode == 13) {
      props.history.push('/ongoingEventList')// remove `this`
    }
  };
  return (
    <input
      className={`${classes.borderedInput} ${classes.middleFont}`}
      placeholder={"city or place"}
      onFocus={deletePlaceholder}
      onBlur={e => makePlaceholder(e, sm ? "events" : "city or place")}
      onKeyDown={keyPress}
    />
  );
};

Hope you are defining the keyPress handler inside the functional component(not outside) and using the history prop properly.

if still an issue, leave a comment..