React 18 onClick Event Handling Tutorial Examples

Last Updated on March 4, 2024 by Digamber in React JS

In this tutorial, we will show you how to use the onClick event handler to handle various events in React js application.

When you develop React application, you deal with event handling a lot. You may get any type of challenges related to handling onClick events. In this guide, we will elaborate on how to:

Invoke function after clicking a button using the onClick event handler

Trigger inline function through onClick clicking on the button

Call multiple or various functions using the onClick event handler

Update UI state with onClick event in React

Bind value to button and get using onClick event handler.

How to Handle Values with onClick Event Handler in React Buttons

• Step 1: Build React App
• Step 2: Trigger Function After Clicking Button
• Step 3: Handle Inline Function with onClick Button Click
• Step 4: Trigger Multiple Functions with Button onClick Event
• Step 5: Update UI or State with Button onClick Event
• Step 6: Set Value in Button with onClick Button Event
• Step 7: View App in Browser

Build React App

The first requirement of developing a react app is to have the create-react-app tool installed in your system:

npm install create-react-app --global

After you set up the given above tool, run the given command to create the new react app:

npx create-react-app react-demo

Move into application folder’s root:

cd react-demo

Trigger Function After Clicking Button

In general, we define a simple function that we attach to a button using the onClick event handler. Such practice aims to call a function on a button click.

Here is a simple example with React class component where we are invoking a function using the onClick event handler.

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.showMessage = this.showMessage.bind(this)
  }

  showMessage() {
    window.alert('Hi! User')
  }

  render() {
    return (
      <div>
        <button onClick={this.showMessage}>Click Here!</button>
      </div>
    )
  }
}

Handle Inline Function with onClick Button Click

Sometimes we have the requirement to define the inline function to the button.

We can set and call the inline function using the onClick event handler.

import React from 'react'

function App() {
  return (
    <div>
      <button onClick={() => window.alert('Hey there')}>Click Here!</button>
    </div>
  )
}

export default App

Trigger Multiple Functions with Button onClick Event

Development in react is a little bit difficult at first; however, the ecosystem that React offers will make you fall in love with it.

You can set multiple functions in just a single button onClick event.

Similarly, you can call multiple functions from a single button onClick event handler.

import React from 'react'

function App() {
  const showAge = () => {
    const age = 55
    return window.alert('Your age : ' + age)
  }

  const showEmail = () => {
    const email = 'john@gmail.com'
    return console.log('Your email : ' + email)
  }

  return (
    <div>
      <button
        onClick={() => {
          showAge()
          showEmail()
        }}
      >
        Click Here!
      </button>
    </div>
  )
}

export default App

Update UI or State with Button onClick Event

While developing React app, you may need to use the inline function to update the state.

In the below example, we are updating the state using an inline function with an onClick button click handler.

import React, { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>{count}</p>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >
        Click Here!
      </button>
    </div>
  )
}

export default App

Set Value in Button with onClick Button Event

In the last example, we will show you how to pass a value to a button through the inline function.

To bind the value to the button in React, we need to define the value along with the onClick event handler.

import React from 'react'

function App() {
  return (
    <button
      value="John Doe"
      onClick={(event) => window.alert(event.target.value)}
    >
      Click Here!
    </button>
  )
}

export default App

View App in Browser

Type the command on the console then hit enter and run the react server:

npm start

Above command will open the app on the browser with following url:

http://localhost:3000

Conclusion

In React, the onClick handler authorizes you to trigger a function and execute a certain action when a user clicks on a particular element.

Therefore, onClick is considered the cornerstone of any React app.

This guide has taught us how to pass values to the button, call multiple events using the onClick event handler, and update the state using the onClick event handler through the button element.