import { useState } from "react";
function App() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault(); // prevent page reload
alert("Form submitted: " + name);
};
return (
<form onSubmit={handleSubmit}>
<h2>Simple React Form</h2>
<input
type="text"
placeholder="Enter your name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}
export default App;
×
React.js Tutorial
- React.js Introduction
- React.js JSX
- React.js Components
- React.js Rendering
- React.js Fragment
- React.js Props
- React.js Routing
- React.js Hooks
- React.js Event
- React.js Sass
- React.js List
- React.js Formsubmit
- React.js Css
- React.js Select
- React.js Project Structure
- React.JS Lazy Loading
- React.js Memo
- React.js useMemo
- React.js useCallback
- React.js API Services
- React.js Image Upload
- React.js PDF Generate
- React.js Reconciliation
- React.js Redux
ES6 Reactjs
React.js Packages
React.js Tutorial
- React.js Introduction
- React.js JSX
- React.js Components
- React.js Rendering
- React.js Fragment
- React.js Props
- React.js Routing
- React.js Hooks
- React.js Event
- React.js Sass
- React.js List
- React.js Formsubmit
- React.js Css
- React.js Select
- React.js Project Structure
- React.JS Lazy Loading
- React.js Memo
- React.js useMemo
- React.js useCallback
- React.js API Services
- React.js Image Upload
- React.js PDF Generate
- React.js Reconciliation
- React.js Redux