Using onKeyDown on a certain element will require focus to work as intended.

We can make your MdOutlinePause component focus-able by adding the tabindex attribute. That will allow you to give the icon focus by hitting tab or by clicking on it. The element would look something like this:

<MdOutlinePause tabIndex={0} onKeyDown={handleKey} />

If you want to detect the key event without having to focus the element, you will need to attach an event listener. We can do this with useEffect so this happens onMount, and we'll attach the event listener to the window so it works regardless of which element has focus:

  /// Don't copy and paste this - see below
  useEffect(() => {
    window.addEventListener("keydown", handleKeyPress);
    });
  }, []);
  /// Don't copy and paste this - see below

This allows you to detect the keyboard event, which is great, but there's an issue: the eventListener gets added again whenever the page mounts, but is never removed. So you will likely run into issues of your function getting called multiple times on each keyPress.

We can fix this by removing the event listener in the return from useEffect. This is how we specify a function to let the useEffect clean up after itself. This ensures that our useEffect is never adding more than one "keydown" event listener at a time:

  useEffect(() => {
    window.addEventListener("keydown", handleKeyPress);

    return () => {
      window.removeEventListener("keydown", handleKeyPress);
    };
  }, []);

Here's a full example on codesandbox

This works great if you don't need to access state in your handleKeyPress function.

It is a common use case to need to do something with state variables when the user does a certain action, and if we need to access updated state then we run into a problem: we attached handleKeyPress to the event listener onMount and the function never gets updated, so it will always use the initial version of state. This codesandbox illustrates the issue.

We can fix this by adding handleKeyPress to the dependencies array for useEffect, but this results in our event listener being removed and re-added on every render since handleKeyPress will be updated on each render. A better solution is to use the callback pattern with our handleKeyPress so that it is only updated when actually necessary (when the state it depends on is updated). We also want to add handleKeyPress to our useEffect dependency array so we create a new event listener when the handleKeyPress function changes:

  const handleKeyPress = useCallback((event) => {
    // do stuff with stateVariable and event
  }, [stateVariable]);

  useEffect(() => {
    window.addEventListener("keydown", handleKeyPress);

    return () => {
      window.removeEventListener("keydown", handleKeyPress);
    };
  }, [handleKeyPress]);

Now everything updates appropriately! Here's a full example of this on codesandbox.

There's one more solution which lets you access state in the simplest way possible. The downside is that the only state variable you have access to (with updated values) will be the state variable you are updating, so this solution is situational. To access other state variables, you'll have to use the solution above.

By passing a function to useState, we can access the previous state as the first argument of the function. This allows for a much simpler approach, shown below and in this codesandbox.

  const [text, setText] = useState("");

  const handleKeyPress = event => {
    setText(previousText => `${previousText}${event.key}`);
  };

  useEffect(() => {
    window.addEventListener("keydown", handleKeyPress);

    return () => {
      window.removeEventListener("keydown", handleKeyPress);
    };
  }, []);

As stated in React's Event System documentation :

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Thus, an instance of a SyntheticEvent is passed to your callback

handleKeyUp: function(event) {
    /* event is an instance of SyntheticEvent 
       from wich you can extract the currentTarget 
    */
},

Edit : In case you really want to access component's ref name before doing anything, here is how you could do it in ES6 :

class MyComponent extends React.Component {

    constructor() {

        super();

        this.handleLoginKeyUp = this.keyUpHandler.bind(this, 'LoginInput');
        this.handlePwdKeyUp = this.keyUpHandler.bind(this, 'PwdInput');
    }

    keyUpHandler(refName, e) {
        console.log(refName);
        // prints either LoginInput or PwdInput
    }

    render() {

        return (
            <div>
                <input type="text" onKeyUp={this.handleLoginKeyUp} ref="LoginInput" />
                <input type="text" onKeyUp={this.handlePwdKeyUp} ref="PwdInput" />
            </div>
        );
    }
}

as i understand, the problem is that gameState.toggleCP is not being called on keyup event. keyup in order for event handler will be called on an element — element must be in focus.

TL:DR; add keyup listener onto the document

if you want to handle keyup event no matter which element is in focus — within React app component do the following:

import { useCallback, useEffect } from "react";

const gameState = {
  toggleCP: () => {
    // your function instructions
  },
};

export function MyComponent() {
  const handleKeyUp = useCallback(
    (event) => {
      gameState.toggleCP();
    },
    [gameState.toggleCP]
  );

  useEffect(() => {
    document.addEventListener("keyup", handleKeyUp);
    return () => {
      document.removeEventListener("keyup", handleKeyUp);
    };
  }, [handleKeyUp]);

  return <div className="playerContainer"></div>;
}

good luck fren!

You have to capture the keypress then in body/window level. Table element doesn't have input focus so you can't capture the keys from table (without input element).

var cmdDown = false;

document.body.addEventListener('keydown', function(event) {
  var key = event.keyCode || event.charCode || 0;
  if ([91,93,224,17].indexOf(key) !== -1) {
    cmdDown = true;
  }
  console.log('CMD DOWN: ' + cmdDown.toString());    
});

document.body.addEventListener('keyup', function(event) {
  var key = event.keyCode || event.charCode || 0;
  if ([91,93,224,17].indexOf(key) !== -1) {
    cmdDown = false;
  }
  console.log('CMD DOWN: ' + cmdDown.toString());
});