Hooking Events in JSX

Now let's study working with events in React. For example, let's make it so that when you click on a block, alert with some text is displayed.

Let's say we have a function showMess, which outputs alert with a message, and in the HTML code there is a button, by clicking on which we would like to see this alert:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

Let's bind the onclick event to our button so that when this div is clicked, the showMess function is triggered. To do this, you need to add the onClick attribute (in camelCase, that is, onClick, not onclick), and in it specify the function that will be executed by this event:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button onClick={showMess}>show</button>
  </div>;
}

This is how events are handled: an attribute is added (for example, onClick or onFocus), the attribute value specifies the method that will be called by this event.

jsxfunction App() {
  function show1() {
    alert(1);
  }
  
  function show2() {
    alert(2);
  }
  
  return <div>
    <button>act1</button>
    <button>act2</button>
  </div>;
}