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