7 Essential Events in React You Need to Know

Building a React app where users can't click buttons, submit forms, or even type in text fields? Here is a list of 7 essential events you need to know:

*Code snippets are written in React and TypeScript.

onClick

• Purpose: Triggered when an element is clicked.
• Usage: Often used for buttons, links, or any clickable elements to handle user actions like submitting a form, opening a modal, etc.

<button onClick={handleClick}>Click Me</button>

const handleClick = () => {
  console.log("Button clicked!");
};

2. onChange

• Purpose: Triggered when the value of an input element changes.
• Usage: Commonly used for form inputs to update state as the user types.

import { useState } from "react";

function MyComponent() {
  const [inputValue, setInputValue] = useState(""); // Define state for input value

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value); // Update the state with the new input value
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleInputChange} // Handle the change event
    />
  );
}

export default MyComponent;

3. onBlur

• Purpose: Triggered when an element loses focus.
• Usage: Often used for form validation when the user moves away from an input field.

<input type="text" onBlur={handleBlur} />

const handleBlur = () => {
  console.log("Input lost focus");
};

4. onFocus

• Purpose: Triggered when an element gains focus.
• Usage: Used to perform actions when an input field is focused, such as showing a tooltip or highlighting the field.

<input type="text" onFocus={handleFocus} />

const handleFocus = () => {
  console.log("Input gained focus");
};

5. onSubmit

• Purpose: Triggered when a form is submitted.
• Usage: Used to handle form submission, often preventing the default form submission behavior to handle it with JavaScript.

• Notes: The onSubmit event should be attached to the form element, not the button. This ensures that the form submission is handled correctly, whether the user clicks the submit button or presses the Enter key.

  The button element has type="submit", which triggers the form's onSubmit event when clicked.
  

<form onSubmit={handleSubmit}>
  <input type="text" value={inputValue} onChange={handleInputChange} />
  <button type="submit">Submit</button>
</form>

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  console.log("Form submitted");
};

6. onKeyDown

• Purpose: Triggered when a key is pressed down.
• Usage: Used to handle keyboard events, such as submitting a form when the Enter key is pressed.

<input type="text" onKeyDown={handleKeyDown} />

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  if (event.key === "Enter") {
    console.log("Enter key pressed");
  }
};

7. onMouseEnter and onMouseLeave

• Purpose: Triggered when the mouse pointer enters or leaves an element.
• Usage: Used to handle hover effects, such as showing a tooltip or changing the style of an element.

<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
  Hover over me
</div>

const handleMouseEnter = () => {
  console.log("Mouse entered");
};

const handleMouseLeave = () => {
  console.log("Mouse left");
};

Building a language learning app and need an API? Read How to use Free dictionary API