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.

Syntax:

function Component(){
 doSomething(e){
   e.preventDefault();
   // 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.

Example:

App.js




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>
    </div>
  );
}
  
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!