title: How to resolve React.js states with multiple button clicks?
body: <p>I attached code in <strong><a href="https://codesandbox.io/s/white-fog-2m34u" rel="nofollow noreferrer">CodeSandbox</a></strong> and video on <strong><a href="https://www.youtube.com/watch?v=6yODcFv08-E&amp;feature=youtu.be" rel="nofollow noreferrer">YouTube</a></strong>. You can see what actualy goes on when multiple clicks are made in short time. So, I tried a lot, but nothing happened. </p>
  
  <p>So, the issues are:</p>
  
  <ul>
  <li>when click miltiple times 'Send message' - 'Cancel', application remembers previous click and hides 'Cancel' button soon;</li>
  <li>the same happens to bottom message with when feedback message is not sent.</li>
  </ul>
  
  <p>Any help will be appreciated.</p>
  
  <p><strong>EDITED</strong>:</p>
  
  <p>also I need to situate alerts one one line with buttons. no span, no  helps</p>
  
  <p><a href="https://i.stack.imgur.com/blKKa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/blKKa.png" alt="enter image description here"></a></p>