React ButtonHandlingEvents

React Button HandlingEvents:

In React, you can create event handling functions to handle user interactions like button clicks. Here's an example of how you can create a simple React component with two buttons and event handling functions:

ButtonHandlingEvent.js:

import React from "react";

import "./events.css";

class ButtonHanldingEvent extends  React.Component{

   constructor(){

  super();

  this.state={message:""}

   }

handleChagne=()=>{

   this.setState({message:"The Button is clicked"});

}

   handlingevent =()=>{

    alert("the Button is clicked");

   }

//reset line

resetLine=()=>{

   this.setState({message:""});

}

   render(){

      return <div>

         <p>{this.state.message}</p>

  <button className="Click" onClick={this.handleChagne}>Clik me</button>

  <button className="reset" onClick={this.resetLine}>Reset</button>

      </div>

   }

}

export default ButtonHanldingEvent;

events.css:

.Click{

   padding: 10px;

   margin:5px;

   background-color: red;

   color: rgb(246, 241, 241);

   border-radius: 18px;

   border:none;

   cursor: pointer;

}

.reset{

   padding: 10px;

   margin:5px;

   background-color: red;

   color: rgb(246, 241, 241);

   border-radius: 18px;

   border:none;

   cursor: pointer;  

}

p{

   font-size: large;

   color: blue;

   font-weight: bold;

}

App.js:

import React from "react";

import HandlingEvent from "./handlingEvent";

function  App(){

  return <div>

  <HandlingEvent/>

  </div>

}

export default App;