Passing Argument to Event Handling using bind()

Passing Argument to Event Handling using bind()

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(

document.getElementById('root')

);

class Eventbind extends React.Component{

constructor(){

super()

this.state={

msg:"Welcome"

}

clickEvent=(a)=>{

this.setState({

msg:a

})

}

render(){

return(

<div>

<h1>{this.state.msg}</h1>

<button onClick={this.clickEvent.bind(this,"Hello World")}>Click</button>

</div>

)

}

var mystyle={color:'green',textAlign:'center'}

const element =<div style={mystyle}><Eventbind/></div>;

root.render(element);

Output

onMouseOver Event

just moving mouse over on click it will change welcome to Hello World