Event Listeners in React

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
• #6 useState: 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

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

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>
  )
}