title: Set an argument and call a function with onClick()
body: <p>I have a form with some fields, which can be filled with speech recognition. I click on a button to play audio, then speech recognition starts listening.</p>
  <p>The problem is for some reasons <code>setBtnName('name')</code> doesn't set the value and I get an error that <code>__.mp3</code> <code>doesn't exist</code>.</p>
  <p>I believe my approach to call a function <code>playName()</code> that <code>sets</code> an argument and call another <code>function</code> inside is incorrect. Maybe someone knows another way to set an argument and call a function with <code>onClick()</code> directly?</p>
  <p><a href="https://i.stack.imgur.com/mPQ0h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mPQ0h.png" alt="enter image description here" /></a></p>
  <pre><code>const [btnName, setBtnName] = useState('')
  
  function playName(){
     setBtnName('name')
     playSound()
  }
  
  function playAge(){
     setBtnName('age')
     playSound()
      }
  
  const audio = [`${btnName}.mp3`]
  
  function playSound(){
  //Play sound and start recognition 
  }
  
  useState(){
  //use {btnName} as a value for json file to compare it with transcript
  }
      return (
      &lt;div&gt;
        &lt;p&gt;Microphone: {listening ? 'on' : 'off'}&lt;/p&gt;
        &lt;button
          onClick={playName}
          type=&quot;button&quot;&gt; Name
        &lt;/button&gt;
        &lt;button
          onClick={playAge}
          type=&quot;button&quot;&gt; Age
        &lt;/button&gt;
        &lt;div&gt;{name}&lt;/div&gt;
        &lt;div&gt;{age}&lt;/div&gt;
      &lt;/div&gt;
    )
  </code></pre>