title: How can I add an event to a child component?
body: <p>I'd like certain elements on my site to emit a sound when clicked. I easily did that by adding an <code>audio</code> element with a <code>ref</code>, and a function that plays the <code>ref</code>s sound <code>onClick</code>.</p>
  
  <pre><code>const sound = require('../sounds/bird.mp3');
  const soundRef = useRef(null);
  const playSound = () =&gt; {
      soundRef.current.play();
  }
  
  return &lt;div&gt;
      &lt;audio ref={soundRef}&gt;&lt;source src={sound} /&gt;&lt;/audio&gt;
      &lt;img src="bird.png" onClick={playSound} /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Since I now found out I may need to reuse this, I decided to create an <code>Audio</code> component to encapsulate the clicked element. I'd like it to receive the sound's file name as a property:</p>
  
  <pre><code>&lt;Audio soundName="bird"&gt;
      &lt;div&gt;&lt;img src="bird.png" /&gt;&lt;/div&gt;
  &lt;/Audio&gt;
  </code></pre>
  
  <p>My problem is: in the <code>Audio</code> component, I get the <code>soundName</code> and <code>children</code> props and render the <code>{children</code>, but how do I add an <code>onClick</code> even to the child element, so it would trigger the <code>Audio</code> element <code>playSound</code> function?</p>
  
  <p>What I currently have in the <code>Audio</code> component:</p>
  
  <pre><code>export default ({soundName, ...children}) =&gt; {
      const sound = require(`../sounds/${soundName}.mp3`);
      const soundRef = useRef(null);
      const playSound = () =&gt; {
          soundRef.current.play();
      }
  
      return &lt;&gt;
          &lt;audio ref={soundRef}&gt;&lt;source src={sound} /&gt;&lt;/audio&gt;
          {children}    // &lt;--- this is where I need to somehow add the event
      &lt;/&gt;
  }
  </code></pre>
  
  <p>I'm hoping I'm missing a tiny thing here...</p>