Devship

Handling Events with States

In JavaScript, events like onclick, ondblclick, and others can be handled in React as well. Here we explore how to manage state values with different events.

Example: Handling Events

import React, { useState } from 'react';

const EventHandling = () => {
    const [val, setVal] = useState(0);

    const inc = () => {
        setVal(prevState => prevState + 1);
    }

    const incDouble = () => {
        setVal(prevState => prevState * 2);
    }

    const incReset = () => {
        setVal(0);
    }

    return (
        <>
            <h1>{val}</h1>
            <button onMouseOver={inc} onClick={incDouble} onDoubleClick={incReset}>Value</button>
        </>
    );
}

export default EventHandling;
Warning

Ensure that each event handler function updates the state correctly to avoid unexpected behaviors.

In the example above:

  • onMouseOver: The value increases by 1 when the mouse is hovered over the button.
  • onClick: The value doubles when the button is clicked.
  • onDoubleClick: The value resets to 0 when the button is double-clicked.
Deep Dive

Responding to Events

Explore in-depth about how to handle various types of events in React components, including click events, form submissions, mouse events, keyboard events, and more.

Responding to Events for dive into the topic.

Task

Practice Handling Events with States

Objective: Create a component that handles various events to update state values in different ways.

  1. Create a Functional Component:

    Create a functional component named EventCounter.

    import React from 'react';

const EventCounter = () => {
    // Code for state and event handlers will be added in subsequent steps
    return (
        <div>
            {/* EventCounter content will be added here */}
        </div>
    );
}

export default EventCounter;

  2. Import useState Hook:

    Import the useState hook from the 'react' library.

    import React, { useState } from 'react';

  3. Initialize State:

    Initialize a state variable count with an initial value of 0 using useState.

    const EventCounter = () => {
    const [count, setCount] = useState(0);

    return (
        // EventCounter content
    );
}

  4. Create Event Handlers:

    Implement the following event handler functions:

    • increment: Increases the count by 1.
    • doubleIncrement: Doubles the count.
    • reset: Resets the count to 0.
    const increment = () => {
    setCount(prevCount => prevCount + 1);
}

const doubleIncrement = () => {
    setCount(prevCount => prevCount * 2);
}

const reset = () => {
    setCount(0);
}

  5. Render Button with Event Handlers:

    Render a button with the following event handlers:

    • onMouseOver: Triggers increment.
    • onClick: Triggers doubleIncrement.
    • onDoubleClick: Triggers reset.
    const EventCounter = () => {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(prevCount => prevCount + 1);
    }

    const doubleIncrement = () => {
        setCount(prevCount => prevCount * 2);
    }

    const reset = () => {
        setCount(0);
    }

    return (
        <div>
            <h1>{count}</h1>
            <button onMouseOver={increment} onClick={doubleIncrement} onDoubleClick={reset}>Count</button>
        </div>
    );
}

export default EventCounter;

This task will help you practice handling different events and updating state values in functional components.