React

Last Updated: 3/15/2023

Events

  • React can perform actions based on user events.
  • React events are written in camelCase syntax
  • React event handlers are written inside curly braces

Calling Named Method

function LikeButton() {
    function handleClick() {
        alert("You clicked me");
    }

    return (
        <button onClick={handleClick}>Like</button>
    )
}

Inline Function/Arrow Function

<button onClick={() => alert("You click me")}>Like</button>

Passing Arguments

  • To pass an argument to an event handler, use an arrow function.
function handleClick(msg) {
	alert(msg);
}


<button onClick={() => handleClick('You clicked me')}>Like</button>

Passing Event Object

function handleClick(event, msg) {
    alert(event);
    alert(msg);
}

<button  onClick={(event) => handleClick(event, 'You clicked me')}>Like</button>