Tutorials/React/GET STARTED
Lesson

React Event

GET STARTED/React

React Events

Events are user actions
Examples click change mouseover

Add Event in React

Use camelCase

plaintext
<button onClick={handleClick}>Click</button>

Example

plaintext
function App() {
  const handleClick = () => {
    alert("Clicked")
  }

  return <button onClick={handleClick}>Click</button>
}

Pass Arguments

plaintext
<button onClick={() => handleClick("Hello")}>Click</button>

Event Object

plaintext
function App() {
  const handleClick = (event) => {
    console.log(event.type)
  }

  return <button onClick={handleClick}>Click</button>
}

With Argument and Event

plaintext
<button onClick={(e) => handleClick("Hi", e)}>Click</button>

This will come in handy when we look at Form in a later chapter.