React Events: An Introduction to Handling User Interactions

👉 Original Blog Post : Link

In this blog post, we'll introduce the concept of events in React and how they can be used to handle user interactions.

First, let's create a new React app using create-react-app. Open up a terminal and run the following command:

npx create-react-app react-events

This will create a new directory called react-events with a basic React app set up.

Now, open up the file src/App.js in your code editor. You should see a basic React component called App with some JSX code that renders a heading and a few paragraphs of text.

To handle a user interaction in React, we can use an event handler. An event handler is a function that is called in response to a specific event, such as a user clicking a button or hovering over an element.

In React, we can bind an event handler to an element by using the on prefix followed by the event name, such as onClick or onMouseOver. For example, let's add a button to our App component and bind an event handler to the onClick event:

import React from 'react';

function App() {
  const handleClick = () => {
    console.log('Button was clicked!');
  }

  return (
    <div>
      <h1>React Events</h1>
      <p>Welcome to a tutorial on handling user interactions in React.</p>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}

export default App;

Now, when the user clicks the button, the handleClick function will be called and the string 'Button was clicked!' will be logged to the console.

We can also pass arguments to an event handler by using an arrow function. For example, let's say we want to log the text of the button to the console when it is clicked. We can update the handleClick function to accept an argument and use it to log the text:

const handleClick = (text) => {
  console.log(text);
}

<button onClick={() => handleClick('Button was clicked!')}>Click me!</button>

Example oF Using React Events: To display current time in the UI every time the user scrolls the page

We can update the App component to display the current time in the UI every time the user scrolls the page. To do this, we'll need to add a state variable to store the current time, and use the useState hook to update the time whenever the user scrolls.

Here's how we can update the App component to display the current time in the UI:

import { useEffect, useState } from 'react';

function App() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    window.addEventListener('scroll', () => {
      setTime(new Date());
    });
  }, []);

  return (
    <div>
      <h1>React Events</h1>
      <p>Welcome to a tutorial on handling user interactions in React.</p>
      <p>The current time is: {time.toString()}</p>
    </div>
  );
}

export default App;

Now, whenever the user scrolls the page, the current time will be displayed in the UI.

In addition to handling user interactions, events can also be used to trigger animations and transitions in React. For example, we can use the onMouseOver event to change the style of an element when the user hovers over it, or the onTransitionEnd event to trigger an animation when a CSS transition has finished.

Conclusion

That's a brief introduction to handling user interactions in React using events. With a little bit of practice and experimentation, you'll be able to use events to create rich and interactive user interfaces with React.

Thank You for reading till here. Meanwhile you can check out my other blog posts and visit my Github and my socials here .

I am currently working on [DVS Tech Labs]

This article was created with the help of AI