title: React: playNote() Undefined Function Error
body: <p>I'll be short, I'm trying to make an piano application that will play notes on mouse click in the first stage of app, later on I want to do that on keyboard buttons. So I have the problem I don't know if I am calling a function properly or even if I'm doing forEach loop properly.</p>
  
  <pre><code>import React, { Component, Fragment } from 'react'
  import NoteA from './notes/A.mp3';
  import NoteAb from './notes/Ab.mp3';
  import NoteB from './notes/B.mp3';
  import NoteBb from './notes/Bb.mp3';
  import NoteC from './notes/C.mp3';
  import NoteD from './notes/D.mp3';
  import NoteDb from './notes/Db.mp3';
  import NoteE from './notes/E.mp3';
  import NoteEb from './notes/Eb.mp3';
  import NoteF from './notes/F.mp3';
  import NoteG from './notes/G.mp3';
  import NoteGb from './notes/Gb.mp3';
  
  const keys = document.querySelectorAll('.key');
  keys.forEach(key =&gt; {
      key.addEventListener('click', () =&gt; playNote(key));
  })
  
  
  class Piano extends Component {
  
      playNote = (key) =&gt; {
          const noteAudio = document.getElementById(key.dataset.note);
          noteAudio.play();
      };
  
      render() {
          return (
              &lt;Fragment&gt;
              &lt;div class="piano"&gt;
                  &lt;div data-note="C" class="key white"&gt;&lt;/div&gt;
                  &lt;div data-note="Db" class="key black"&gt;&lt;/div&gt;
                  &lt;div data-note="D" class="key white"&gt;&lt;/div&gt;
                  &lt;div data-note="Eb" class="key black"&gt;&lt;/div&gt;
                  &lt;div data-note="E" class="key white"&gt;&lt;/div&gt;
                  &lt;div data-note="F" class="key white"&gt;&lt;/div&gt;
                  &lt;div data-note="Gb" class="key black"&gt;&lt;/div&gt;
                  &lt;div data-note="G" class="key white"&gt;&lt;/div&gt;
                  &lt;div data-note="Ab" class="key black"&gt;&lt;/div&gt;
                  &lt;div data-note="A" class="key white"&gt;&lt;/div&gt;
                  &lt;div data-note="Bb" class="key black"&gt;&lt;/div&gt;
                  &lt;div data-note="B" class="key white"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;audio id="C" src="../notes/C.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="Db" src="../notes/Db.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="D" src="../notes/D.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="Eb" src="../notes/Eb.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="E" src="../notes/E.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="F" src="../notes/F.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="Gb" src="../notes/Gb.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="G" src="../notes/G.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="Ab" src="../notes/Ab.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="A" src="../notes/A.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="Bb" src="../notes/Bb.mp3"&gt;&lt;/audio&gt;
              &lt;audio id="B" src="../notes/B.mp3"&gt;&lt;/audio&gt;
  
              &lt;/Fragment&gt;
          )
      }
  }
  
  export default Piano
  
  </code></pre>
  
  <p>P.S. I am new to React, I was watching an tutorial on YouTube, guy did this type of application with Vanilla JavaScript so I wanted to try if I can make it through React.</p>