React Js On Click Event Handler Examples Tutorial

In this simple guide, we will elaborate more about React js onClick event handler and explain how you can use and set the onClick event in React js function component through multiple code examples.

Event handlers are the simple name of the events, generally prefixed by the “on” keyword. For instance, the event handler for the Click event is onClick. Similarly, for the Focus event, it is onFocus. In JavaScript, functions and methods are created and invoked by events.

Event handlers are used to trigger functions; they are used for form submission, validate data, verify user input, user actions and browser actions. An event handler is seldom used when the web page loads, the web page closes, and when the user hovers or clicks on a button.

The onClick event handler is one of the most significant event handlers. It invokes when a user clicks on a button or HTML element.

In this guide, we have conjugated various examples of onclick event handlers. We are pretty sure that in your react development lifecycle, you will need this react onclick event handler examples guide.

Set Simple onClick Event to Button

We have a function component, define a simple button using the HTML button attribute. Define the onClick event, pass the event name with the curly braces, and use the function to define the action that you want to trigger when the click event is invoked.

import React, { useState } from 'react'

function App() {
  const displayModal = () => {
    window.alert('Hello! Admin')
  }

  return (
    <div>
      <button onClick={displayModal}>Fire Event</button>
    </div>
  )
}

export default App

React Inline onClick Event Handler Example

When you write a programme to create some feature, in some cases, you might need to trigger some action through inline on click event.

import React from 'react'

function App() {
  return (
    <div>
      <button onClick={() => window.alert('Good Morning, John')}>Click</button>
    </div>
  )
}

export default App

Pass Multiple onClick Events to Single Button

Recently, I was developing an app where a peculiar need arose where I had to call multiple functions from a single button. If you meet such requirements in future, you may use the approach I followed below.

import React from 'react'

function App() {
  const showTeacher = () => {
    const name = 'Peter'
    return window.alert('Teacher name is : ' + name)
  }

  const showStudent = () => {
    const name = 'Oliver Bin'
    return window.alert('Student name is : ' + name)
  }

  return (
    <div>
      <button
        onClick={() => {
          showTeacher()
          showStudent()
        }}
      >
        Fire Multi Events!
      </button>
    </div>
  )
}

export default App

Set State with onClick Event

In React, user interfaces are directly associated with the state. We can use on click event handler to change the UI state.

import React from 'react'

function App() {
  const [num, setIncrement] = React.useState(0)

  return (
    <div>
      <p>{num}</p>
      <button
        onClick={() => {
          setIncrement(num + 5)
        }}
      >
        Increment
      </button>
    </div>
  )
}

export default App

Set and Get Button Value with Inline onClick Event

In this last example, I will show you how you can set the static button value and get the button value using the onClick event handler.

import React from 'react'

function App() {
  return (
    <button value="Sara James" onClick={(e) => window.alert(e.target.value)}>
      Show Name
    </button>
  )
}

export default App