How to create an event in React ?

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

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.