Handling Events in a ReactJS component

In the following blog, we will learn about handling Events in a React App.

Events in React are the actions that can be performed when the user clicks on a button or check uncheck a checkbox or writes some text in the input. React has all the Events like normal HTML events.

In React we use the camelCase convention when writing Events. For example onClick, onChange etc.

import { FC } from "react";

type P ={}
const Test:FC<P> = ()=>{

    function handleChange(){
        // code on click 
    }

    return <div>
        <button onClick={handleChange}>click me</button>
    </div>
}
export default Test;

here I have created a Test Component that has a button click me. when the user will click on the button the handleChange function will be triggered.

When using we don't need to call actionListener.Instead, just provide a listener when the element is initially rendered.

Handling events in Classbassed Components

When working in class-based components we can use these listeners by this keyword. a function call is performed in the reference with the class object. so we need to bind the function with the object of the class.

type P = {};
type S = { Toggle: boolean };

class Toggle extends Component<P, S> {
  constructor(props: P) {
    super(props);

    this.state = {
      Toggle: false,
    };
  }

  toggleFunc() {
    this.setState({ Toggle: !this.state.Toggle });
  }

  render(): ReactNode {
    return (
      <div>
        <button onClick={this.toggleFunc}>Click me</button>
      </div>
    );
  }
}
export { Toggle };

In the above example, there is a component named Toggle. here is a button to call a function toggleFunc that will toggle the state.

Passing the argument to listeners

We can pass some info or data in arguments to use it while running the function.

import { FC } from "react";

type P ={}
const AddFunction:FC<P> = ()=>{

  const square = (num:number) =>{
    return num * num;
  }

    return <div>
        <button onClick={()=>square(5)}>square</button>
    </div>
}
export default AddFunction;