How to create an event in React ? - GeeksforGeeks

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
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
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.
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set background images in ReactJS ?
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
How to create a multi-page website using React.js ?
ReactJS useNavigate() Hook
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript