Post
Ask Question

Events in React

Introduction

Any nontrivial application should react to user events, such as the user clicking a button or submitting a form. The application should take appropriate action based on the user input and provide useful information to the user. Events in React are also important since they help us define child-to-parent communication. We use props for parent-to-child communication and events for child-parent communications between components.

We define attributes for custom JSX elements in React for assigning input values. These attributes are called. props. We also assign event handlers for custom elements using props.

Rect applications have props for listening to events on the built-in HTML elements, such as buttons and input elements. While using JSX to create HTML elements, we can use most of the events, as in the case of DOM. But events in React begin with camel case instead of lower case, unlike HTML elements. So we use onBlur in React, unlike onblur in HTML element.

For example, the prop for the built-in button element is called onClick, and the blur element is called onBlur.

Assigning Event Handlers

Any valid javascript expression can be passed as the event handler to the react event. So we can assign an inline arrow function or a named function to the event.

For example, to attach a blur event to the input HTML element, you can use the following syntax.

<input
  type="text"
  onBlur={() => {
    console.log("input blurred");
  }}
></input>

Here we are using the inline arrow function, but you can use the named function instead:

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

Now if you execute the above JSX, then the following will be printed to the console.

Input blurred

Please note that above, we are just assigning the event handler, so we are not adding the parentheses. If we had assigned blurHandler() instead, then it would have called the handler when parsing JSX instead of when the blur event occurs.

Similarly, to react to the button click event, you can add the onClick prop to the button element.

<button type="submit" onClick={() => console.log("button clicked")}>Add</button>

Another use of events is that you can communicate with the parent component using event handlers. For example, in the App parent component, you can assign an event handler and then pass that event handler as a prop to the child element. If you return the following JSX from the App component.

return (
  <div className="App">
    <input type="text" onBlur={() => { console.log("blurred") }}></input>
    <AddUserDetails onAdd={handleAdd}></AddUserDetails>
    <DisplayUserDetails user={user} onRemove={handleRemove}></DisplayUserDetails>
  </div>
);

Then you can call the handleAdd function in your child component. Since the onRemove above is a function pointer, calling it in your child component will call the handleRemove function, which is defined in your parent component. You can call the above handleRemove function in the child component.

function handleClick(i) {
    onRemove(i);
}

Child-to-parent component interaction in React

To understand it better, let's assume we have two components App and BookCreate.The app is the parent component, and BookCreate is the child component. So we declare the BookCreate component in the App component.

<BookCreate onCreate={onCreate}></BookCreate>

function App() {
const onCreate=async(title)=>
  {
    console.log('function called');
}
}

Now in the BookCreate component, we assign this event handler to the function parameter.

function BookCreate({onCreate})
{
}

Now when we call this onCreate event handler in the BookCreate component, the function onCreate in App component will be called. This is how we define Child-to-parent component interaction in React.


Similar Articles