title: React - onKeyDown event
body: <p>I'm creating my own lightbox in React, and I have problem with implementation keyDown event. When I open image I want to have key <code>a</code> for image - 1 and <code>d</code> key for image + 1. I only implemented <code>console.log(e.key)</code> to check if all works properly. And I found an issue, that my KeyDown event only works when I have focus on button left or right. When I click on photo keys don't work.</p>
  
  <p>Lightbox:</p>
  
  <pre><code>&lt;div 
    onKeyDown={this.nextButtonImage} 
    onClick={this.closeLightbox} 
    className="lightbox-container"&gt;
    &lt;div className="lightbox"&gt;
      &lt;button onClick={this.closeLightbox} className="lg-close"&gt;
        &lt;i className="fas fa-times" /&gt;
      &lt;/button&gt;
      &lt;button onClick={this.prevImage} className="lg-arrows lg-left"&gt;
        &lt;i className="fas fa-caret-left" /&gt;
      &lt;/button&gt;
      &lt;button onClick={this.nextImage} className="lg-arrows lg-right"&gt;
        &lt;i className="fas fa-caret-right" /&gt;
      &lt;/button&gt;
      &lt;img src={this.images[this.state.openImage].url} alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>keyDown event:</p>
  
  <pre><code>nextButtonImage = (e) =&gt; {
    console.log(e.key);
  }
  </code></pre>