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;