DEV Community

FOLASAYO SAMUEL OLAYEMI
FOLASAYO SAMUEL OLAYEMI

Posted on

What is the difference between HTML and React event handling?

HTML

In HTML, the attribute name is in all lowercase and is given a string invoking a function defined somewhere:

<button onclick="handleClick()"></button>
Enter fullscreen mode Exit fullscreen mode

ReactJs

In React, the attribute name is camelCase and are passed the function reference inside curly braces:

<button onClick={handleClick} />
Enter fullscreen mode Exit fullscreen mode

Note: In HTML, false can be returned to prevent default behavior, whereas in React preventDefault has to be called explicitly.

Code Sample

HTML

<a href="#" onclick="console.log('The link was clicked.'); return false" />
Enter fullscreen mode Exit fullscreen mode

ReactJs

function handleClick(e) {
  e.preventDefault()
  console.log("The link was clicked.")
}

Enter fullscreen mode Exit fullscreen mode

Also note that, HTML uses lowercase, React uses camelCase.

Thanks for reading...

Happy Coding!

Top comments (0)