[BUG] Dynamic create GlobalHotKeys component not working

[MeCKodo]

Describe the bug I want to dynamic create GlobalHotKeys component and handler key event

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc) GlobalHotKeys

Expected behavior the down event will work

Platform (please complete the following information):

• Version of react-hotkeys 2.0.0
• Browser chrome
• OS: Mac

import React from 'react';
import {
  configure,
  GlobalHotKeys,
} from 'react-hotkeys';

configure({
  ignoreTags: []
});

const keyMap = {
  DOWN: 'down'
};
const handlers = {
  DOWN: () => {
    console.log('DOWN DOWN DOWN');
  }
};

class App extends React.Component {
  state = {
    value: ''
  };
  onChange = (e: any) => {
    this.setState({
      value: e.target.value
    });
  };
 render() {
    const { value } = this.state;
    return (
      <GlobalHotKeys keyMap={keyMap}>
        <div>
          <input
            value={this.state.value}
            onChange={this.onChange}
            type="text"
          />
          {value && (
            <GlobalHotKeys handlers={handlers}>
              <ul>
                <li>1</li>
                <li>1</li>
              </ul>
            </GlobalHotKeys>
          )}
        </div>
      </GlobalHotKeys>
    );
  }
}

[greena13]

Hi @MeCKodo, I can't currently see a reason why the above would not work. Are you able to include a log of what happens when you attempt to trigger the handlers you have defined?

[nora-white]

@MeCKodo I believe ArrowDown is the correct keymap, not Down. Using ArrowDown in my own application works fine. Unless you're attempting to capture any key down press, in that case my answer is not correct.