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:

function 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:

function 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.

The following code is given:

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

Make it so that when you click on the first button, the first function is triggered, and when you click on the second button, the second function is triggered.