Навешивание событий в JSX

Давайте теперь изучим работу с событиями на React. К примеру, сделаем так, чтобы по клику на блок выводился алерт с некоторым текстом.

Пусть у нас есть функция showMess, которая выводит алерт с сообщением, а в HTML коде есть кнопка, по клику на которую нам и хотелось бы видеть этот алерт:

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

Давайте привяжем к нашей кнопке событие onclick так, чтобы по клику на этот див срабатывала функция showMess. Для этого нужно добавить атрибут onClick (именно в camelCase, то есть onClick, а не onclick), а в нем указать функцию, которая выполнится по этому событию:

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

Таким образом и происходит работа с событиями: добавляется атрибут (к примеру, onClick или onFocus), значением атрибута указывается метод, который будет вызван по этому событию.

Дан следующий код:

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

Сделайте так, чтобы по клику на первую кнопку срабатывала первая функция, а по клику на вторую кнопку - вторая функция.