Event Handling in React
Tags: webdev, javascript, programming, beginners
Published: 2024-03-18 11:29:30


Event handling in React involves using event handlers to respond to user interactions such as clicks, key presses, form submissions, etc. Here's an example demonstrating event handling in a React component:

```js
import React, { useState } from 'react';

const EventHandling = () => {
  // State to track button click count
  const [clickCount, setClickCount] = useState(0);

  // Event handler for button click
  const handleClick = () => {
    setClickCount(clickCount + 1);
  };

  // Event handler for form submission
  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Form submitted!');
  };

  return (
    <div>
      <h2>Event Handling</h2>
      {/* Button with onClick event handler */}
      <button onClick={handleClick}>Click me</button>
      <p>Click count: {clickCount}</p>

      {/* Form with onSubmit event handler */}
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Enter your name" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default EventHandling;


```

In this example:

We use the `useState` hook to create a state variable `clickCount` to track the number of times a button is clicked.
We define the `handleClick` function as an event handler for the button click event (`onClick`). Inside this function, we update the state to increment the click count.
We define the `handleSubmit` function as an event handler for the form submission event (`onSubmit`). Inside this function, we prevent the default form submission behavior using `event.preventDefault()` and show an alert.
The `handleClick` and `handleSubmit` functions are passed as event handlers to the respective elements (`<button>` and `<form>`) using the `onClick` and `onSubmit` attributes.
When the button is clicked or the form is submitted, React calls the respective event handler function, which updates the UI accordingly.
This is a basic example of event handling in React. You can use similar patterns to handle other types of events such as `onChange` for input elements, `onKeyDown` for key presses, etc.

[github](https://github.com/04anilr)
[website](https://my-portfolio-two-lemon-36.vercel.app/)


[Array methods in react.js ](https://dev.to/04anilr/how-to-use-array-methods-in-real-project-example-add-new-record-3o82)
[Fragment in react.js](https://dev.to/04anilr/fragment-in-reactjs-example-of-fragment-299a) 
[Conditional rendering in react.js](https://dev.to/04anilr/conditional-rendering-in-react-conditional-rendering-example-in-react-3j46)
[Children component in react.js](https://dev.to/04anilr/methods-of-react-children-component-in-react-4ol7)
[use of Async/Await in react.js](https://dev.to/04anilr/how-to-use-asyncawait-3a3o)
[Array methods in react.js](https://dev.to/04anilr/array-methods-in-reactjs-36jb)
[JSX in react.js](https://dev.to/04anilr/jsx-in-reactjs-3f7o)
[Event Handling in react.js](https://dev.to/04anilr/event-handling-in-react-5hc7)
[Arrow function in react.js](https://dev.to/04anilr/arrow-functions-in-react-4gb2)
[Virtual DOM in react.js](https://dev.to/04anilr/how-to-work-virtual-dom-in-react-dom-1b39)
[React map() in react.js](https://dev.to/04anilr/how-to-create-react-map-24pp)
[How to create dark mode in react.js](https://dev.to/04anilr/how-to-create-dark-mode-in-react-js-2kn2)
[How to use of Props in react.js](https://dev.to/04anilr/props-and-state-with-example-1bl1)
[Class component and Functional component](https://dev.to/04anilr/class-component-functional-component-in-react-k43)
[How to use of Router in react.js](https://dev.to/04anilr/how-to-use-of-router-in-reactreact-router-1163)
[All React hooks explain ](https://dev.to/04anilr/react-hooks-cheat-sheet-2hic)
[CSS box model ](https://dev.to/04anilr/css-box-model-work-2k0a)
[How to make portfolio nav-bar in react.js](https://dev.to/04anilr/how-to-make-nav-bar-for-portfolio-website-365m)