Hackforge Academy

Explanation

In React, event handling refers to how user interactions like clicks, typing, or form submissions are managed. React uses a synthetic event system that works consistently across all browsers.

Code:

function App() {
  function handleClick() {
    console.log("Button clicked");
  }

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

Explanation

Event handlers in React are written in camelCase (e.g., onClick, onChange) and are passed as functions instead of strings.

Code:

<button onClick={() => 
console.log('Clicked')}>Click</button>

Explanation

You can pass parameters to event handlers using arrow functions.

Code:

function App() {
  function greet(name) {
    console.log("Hello " + name);
  }

  return <button onClick={() => 
greet('hackforge')}>hackforge Academy
</button>;
}

Explanation

Handling form events like input change using onChange and managing state.

Code:

import { useState } from 'react';

function App() {
  const [name, setName] = useState('');

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => 
setName(e.target.value)}
    />
  );
}

Explanation

Preventing default behavior using event.preventDefault(), commonly used in form submissions.

Code:

function App() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log("Form submitted");
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}