6.3. Handling Events in Functional Components

Introduction In this section, we will learn about Handling Events in Functional Components in React. React is a popular JavaScript library for building user interfaces. Functional components are an alternative to class components, and handling events in them is an essential skill. Let’s explore this with the help of our friendly characters, Geek and Gal!

You know about functional components in React, right?

I've heard of them, but I'm not too familiar. Can you explain how to handle events in functional components?

Absolutely! Functional components are created using functions rather than classes. We can handle events in functional components by defining event handler functions and passing them directly to event listeners.

Handling Events in Functional Components

Here's an example of a functional component with a button. When the button is clicked, the text will change!

import React, { useState } from 'react';

function ButtonClick() {
    const [text, setText] = useState('Click the button!');

    function handleClick() {
        setText('Button clicked!');
    }

    return (
        <div>
            <h1>{text}</h1>
            <button onClick={handleClick}>Click me!</button>
        </div>
    );
}

export default ButtonClick;

I see! We define an event handler function called "handleClick" inside the functional component and use "onClick" to attach the event handler to the button!

That's right! By doing this, when the button is clicked, the "handleClick" function will be called, and the text will change.

Hilarious Example

What about a funny example with functional components and event handling?

How about a button that changes the text to a random message when clicked? Let's create that!

import React, { useState } from 'react';

function RandomMessage() {
    const [message, setMessage] = useState('Click the button for a random message!');

    function handleClick() {
        const messages = ['Hello!', 'Howdy!', 'Greetings!', 'Hey there!', 'Hi!'];
        const randomIndex = Math.floor(Math.random() * messages.length);
        setMessage(messages[randomIndex]);
    }

    return (
        <div>
            <h1>{message}</h1>
            <button onClick={handleClick}>Click me!</button>
        </div>
    );
}

export default RandomMessage;

Haha, that's awesome! We've created a component that displays a random message when the button is clicked!

I'm glad you enjoyed it! Keep practicing and have fun creating interactive React components with functional components and event handling!

Conclusion Handling Events in Functional Components is a crucial skill when working with React. By defining event handler functions and attaching them to elements using event listeners, you can create interactive and dynamic components. Keep learning and experimenting to build fantastic web apps! 😄