Events in react

Below example demonstrates how to create event handlers in react function component. In this example, we have handled click event and you can handle other events in similar way.

import React, { useState } from "react";
import "./styles.css";

export default function Main() {

  let [count, setCount] = useState(0);

  let clickIncrement = () => {
    setCount((prevCount) => {
      return ++prevCount;
    });
  };

  let clickDecrement = () => {
    setCount((prevCount) => {
      return --prevCount;
    });
  };

  return (
    <div className="Main">
      <div>{count}</div>
      <button onClick={clickIncrement}>Increment</button>
      <button onClick={clickDecrement}>Decrement</button>
    </div>
  );
}

Complex problems, Simple Solutions