title: React JS, two submit buttons in one form
body: <p>When using React JS, how to identify which button was used to submit the form?
  I thought something like this would work, but it doesn't.</p>
  
  <pre><code>export default function App() {
    const onSubmit = e =&gt; {
      e.preventDefault();
      console.log(e.target.btn.value);
    };
  
    return (
      &lt;form className="App" onSubmit={onSubmit}&gt;
        &lt;button type="submit" name="btn" value="wow"&gt;
          Button 1
        &lt;/button&gt;
        &lt;button type="submit" name="btn" value="oh no"&gt;
          Button 2
        &lt;/button&gt;
      &lt;/form&gt;
    );
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/blazing-firefly-gwk9v" rel="noreferrer">Code sandbox</a></p>
  
  <p>According to standard HTML you should be able to name two buttons the same name? Or use <code>formaction</code> attribute to distinguish them.</p>
  
  <p>In my use case the buttons don't have knowledge about the form. I want to avoid a solution where I use some temporary state to remember which button was clicked.</p>
  
  <p>In standard HTML you can do this:</p>
  
  <pre><code>&lt;form action="/action_page.php"&gt;
    &lt;input type="submit" name="btn" value="Submit"&gt;
    &lt;input type="submit" name="btn" value="Submit2"&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>When you submit the form <code>btn</code> will either be posted <code>Submit</code> or <code>Submit2</code> depending on which button you click. I want to get as close as possible to this standard when building my React form. Use as little help from Javascript and React as possible.
  Basically just add the buttons to the DOM inside my form and collect the values from the event that I have access to inside of the submit handler.</p>