Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create an event in React ?

  • Last Updated : 15 Aug, 2021

Each and every modern webpage that we create today tend to have user interactions. When the user interacts with the web application events are fired. That event can be a mouse click, a keypress, or something rare like connecting the battery with a charger. From the developer side, we need to ‘listen’ to such events and then make our application respond accordingly. This is called event handling that provides a dynamic interface to a webpage. Like JavaScript DOM, React also provides us some built-in methods to create a listener that responds accordingly to a specific event.

Now we will look at certain rules to keep in mind while creating events in React.

  • camelCase Convention: Instead of using lowercase we use camelCase while giving names of the react events. That simply means we write ‘onClick’ instead of ‘onclick’.
  • Pass the event as a function: In React we pass a function enclosed by curly brackets as the event listener or event handler, unlike HTML where we pass the event handler or event listener as a string.
  • Prevent the default: Just returning false inside the JSX element does not prevent the default behavior in react. Instead, we have to call the ‘preventDefault’ method directly inside the event handler function.


function Component(){
   // Some more response to the event
return (
   <button onEvent={doSomething}></button>

Now after watching the above syntax, a question must come in, that what is the ‘e’ object, and from where does it come from. Actually, ‘e’ is a synthetic event. This is an object made with a wrapper around the actual event of the browser. This object is cross-browser.


Creating react application:

  • Step1:Create a React application using the following command:

    npx create-react-app name_of_the_app
  • Step 2: After creating the react application move to the directory as per your app name using the following command:

    cd name_of_the_app

Project Structure: Now open your application folder in an editor. You will see the following file structure:

Approach: Now modify the default App.js file inside your source code directory according to the following steps:

  • Make sure that React is imported. And also import the ‘App.css’ file as it contains some CSS styles for the app component.
  • Clear everything written inside the <div> with ‘className’ App.
  • Create a heading and a button inside this div.
  • Create an onClick event inside the button and pass the ‘eventHandler’ function inside it. We define the function at the top of the ‘App’ component.
  • Add the alert inside the function so that we can listen to the event and generate an alert whenever the event occurs.



import React from 'react';
function App() {
  function eventHandler(){
    alert('Geeksforgeeks is the best platform to learn coding!');
  return (
    <div className='App'>
      <h1>Welcome to Geeksforgeeks</h1>
      <button onClick={eventHandler}>Click for alert!</button>
export default App;

Step to run the application: Open the terminal and write the following command in your terminal.

npm start

Output: Open the browser and type the localhost:3000 to see the following output.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!