Event Handler

Event handling in function based components in React involves using event handlers to handle specific events that occur within the component, such as a button click or a form submission.

To create an event handler, you can define a function within your component that will handle the event. This function should take in an event as a parameter, and can include any logic or state updates that need to occur when the event is triggered.

Here is an example of an event handler for a button click:

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

  return (
    <button onClick={handleClick}>Click me!</button>
  )
}

In this example, the handleClick function is defined within the MyComponent component, and is passed as the value of the onClick prop of a button element. When the button is clicked, the handleClick function will be called, and the string "Button was clicked!" will be logged to the console.

It is also important to note that when passing a function to a component as props, we should not invoke the function but just pass the reference so that the component can call it when the event occurs.

Here is an example of an event handler for a form submission:

function MyComponent() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Form was submitted!");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Enter some text" />
      <button type="submit">Submit</button>
    </form>
  )
}

In this example, the handleSubmit function is defined within the MyComponent component, and is passed as the value of the onSubmit prop of a form element. When the form is submitted, the handleSubmit function will be called, and the string "Form was submitted!" will be logged to the console.

It is important to note that event handling in react is very similar to plain javascript event handling, the only difference is that it uses JSX for rendering the event handlers and the events are passed down as props.

How to access data in the event variable

In React, when an event is triggered, an event object is passed as a parameter to the event handler function. This event object contains information about the event, such as the target element that triggered the event, the type of event, and any data associated with the event. To access data in the event variable, you can use the properties of the event object, such as event.target, event.type, and event.data. For example, if you have a button that triggers an onClick event and you want to access the value of the button, you can use event.target.value to get the value of the button.

Working with Forms

When working with forms in React, you can use the onChange event handler to handle changes to the input fields, and the onSubmit event handler to handle the form submission. The event.target property can be used to access the input element, and the event.target.value property can be used to access the value of the input element. For example, you can use the following code to handle changes to an input field:

function handleInputChange(event) {
    console.log(event.target.value);
}

<input type="text" onChange={handleInputChange} />

And you can use the following code to handle form submission:

function handleFormSubmit(event) {
    event.preventDefault();
    console.log('form submitted');
}

<form onSubmit={handleFormSubmit}>
    <input type="text" />
    <button type="submit">Submit</button>
</form>

It's important to note that you need to call event.preventDefault() in the onSubmit function to prevent the browser from refreshing the page when the form is submitted.

In order to access the form data passed into the handleFormSubmit function, you can use the event object passed as the first parameter to the function. The event object contains a target property, which is an object representing the form element that triggered the event. The target object has properties for each form element, such as input and select elements. You can access the value of each form element by calling the value property on the target object. For example, if you have an input field with the name "name", you can access the value entered in that field by calling event.target.name.value.

You can also use the FormData object to access the form data. The FormData object allows you to easily retrieve and set values of form elements by key-value pairs. You can create a new instance of the FormData object using the new keyword and passing the form element as the parameter. Once you have the FormData object, you can use the get() method to retrieve the value of a specific form element by its name.

Here's an example of accessing the form data using both methods:

using formData

function handleFormSubmit(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  const name = formData.get('name');
  console.log(name);
}

using react event handlers

function handleFormSubmit(event) {
  event.preventDefault();
  const name = event.target.name.value;
  console.log(name);
}