React: Event Handling

Table of Contents

Event Handling

onClick

Function component

/src/component/FunctionClick.js

import React from "react"

// `rfce` snipet
function FunctionClick() {

    // function for the event handler
    const clickHandler = () => console.log("Buttom clicked");

    return (
    <div>
        {/* We don't want to call function with () = function call, it's only              a function  */}
        <button onClick={clickHandler}>Click</button>
    </div>
  )
}

export default FunctionClick

Class component

import React, { Component } from 'react'

// `rce` 
class ClassClick extends Component {
  
    clickHandler = () => console.log("Buttom clicked");

  
    render() {
    return (
      <div>
        <button onClick={this.clickHandler}>Click</button>
      </div>
    )
  }
}

export default ClassClick