---
type: video
yt_id: VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmxFMzFfMGNYZUFn
videoId: lE31_0cXeAg
title: "Event Listeners in React"
date: "2022-09-15T14:00:25Z"
slug: "event-listeners-in-react"
image: 
  name: "event-listeners-in-react.jpg"
  alt: "Event Listeners in React"
  width: 1280
  height: 720
status: 'published'
description: "Learn how to handle events like button clicks and form submissions in a react app. "
tags: ['nodejs', 'react', 'react js', 'javascript']
---

Learn how to handle events like button clicks and form submissions in a react app. 

This is video #5 in my react series: 

* #4 Rendering a List of Components: [https://youtu.be/f640Z6QZawc](https://youtu.be/f640Z6QZawc)
* #6 useState: [https://youtu.be/_wPGcpoZQn8](https://youtu.be/_wPGcpoZQn8)

## Chapters:

* 0:00​ Intro
* 0:34 button onClick
* 2:03 form onSubmit
* 3:33 input onChange
* 4:47 inline arrow functions
* 5:29 events in child components
* 8:27 Summary


## code

**App.jsx**
```jsx
import './App.css'
import Form from './Form'

function App() {

  function handleClick(e) {
    console.log('Button clicked')
  }

  function handleSubmit() {
    console.log('Form submitted')
  }

  return (
    <div className="App">

      <button onClick={handleClick}>Do Something</button>

      <Form onSubmit={handleSubmit} />
     
    </div>
  )
}

export default App
```

**Form.jsx**
```jsx
export default function Form({ onSubmit }) {

  function handleSubmit(e) {
    e.preventDefault()
    onSubmit()
  }
  
  return (
  <form onSubmit={handleSubmit}>
    <input type="text" onChange={(e) => console.log(e.target.value)} />
    <button type="submit">Submit</button>
  </form>
  )
}
```