This video is part of the following playlists:
Learn how to handle events like button clicks and form submissions in a react app.
This is video #5 in my react series:
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>
)
}
Find an issue with this page? Fix it on GitHub