React05 – Events

main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<>
<h1>src_main.jsx</h1>
<App />
</>
</StrictMode>,
)
App.jsx:
import Component from "./components/Component"
const App=()=>{
return (
<>
<h1>src_App.jsx</h1>
<Component/>
</>
);
}
export default App;
Component.jsx
const Component = ()=>{
const click = ()=>{
alert("Button!");
}
return(
<>
<button onClick={click}>Push me</button>
</>
);
}
export default Component;


Events, sending values
Component.jsx
const Component = ()=>{
const click = (my_message)=>{
alert(my_message);
}
return(
<>
<button onClick={()=>{click("My message")}}>Push me</button>
</>
);
}
export default Component;

Access to the event object
Component.jsx:
const Component = ()=>{
const click = (ev)=>{
alert(ev.type);
}
return(
<>
<button onClick={(event)=>{click(event)}}>Push me</button>
</>
);
}
export default Component;

