# Handling Events in React

## Event Handling

Handling events is fairly simple, and looks very similar to the way it's done in regular HTML. Methods like *`onclick`*&#x61;nd `onsubmit` are just `camelCased` and put into React  the same way ***(***`onClick, onSubmit`***)***.

To handle events we can write a **custom function** & **call it inside the event property** or we can write an **inline** **arrow function.**

{% tabs %}
{% tab title="App.js" %}

```jsx
import React from "react"

// Custom Function
function handleClick() {
    console.log("I was clicked")
}

// Function Component
function App() {
    return (
        <div>
            // onMouseOver Event
            <img onMouseOver={() => console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/>
            <br />
            
            // onClick Event
            <button onClick={handleClick}>Click me</button>
            <br />
            
            // onMouseOut Event
            <p onMouseOut={() => console.log("Mouse Out")}>Hover & Out</p>
        </div>
    )
}

export default App

```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}
