Dynamic hotkeys for multiple components.

[gamevnlc]

Hello, I have use HotKeys to render multiple components with a different hotkey. Then I realize I need to focus on components to activate the hotkey. I don't want to do that. I change it to multiple GlobalHotKeys to avoid focus on each component. When I change to GlobalHotKeys and active hotkey the state of the parent does not change. It only affects the first component.

here my code

export const SingleMediaBox = ({media, project, keyboard}) => {
    const {labels} = project;
    const [modalShow, setModalShow] = useState(null);
    const mediaId = media.id;
    const keyMap = {
        ZOOM: `shift+${keyboard}`
    };

    const handlers = {
        ZOOM: event => setModalShow(preState => {
            console.log(preState);
            console.log(media.id);
            if (preState) {
                return null
            } else {
                return media.id
            }
        })
    };

    return (
        <Col xs={4} className="single-media">
            <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
                <p className="mb-2">{media['media_id']}</p>
                <Card>
                    <Media/>
                    <Card.Body>
                        <div>
                            <a href={media['media_url']} target="_blank" className="pr-2"
                               rel="noopener noreferrer">Original</a>
                            {/*<a href="#" className="pr-2">Zoom</a>*/}
                            {/*<Link >Test</Link>*/}
                        </div>
                        {labels.map((label) => (
                            <Form.Check
                                name={media.id}
                                type="radio"
                                label={label.name}
                                key={`label-${label.id}`}
                            />
                        ))}
                    </Card.Body>
                </Card>
                <ModalMedia show={modalShow === mediaId} onHide={() => setModalShow(null)} media={media}/>
            </GlobalHotKeys>
        </Col>
    )
};