How to create a form in ReactJS

function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
const [name, setName] = useState("");

return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}

ReactDOM.render(<MyForm />, document.getElementById('root'));
import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
const [name, setName] = useState("");

const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
}

return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}

ReactDOM.render(<MyForm />, document.getElementById('root'));
import { useState } from "react";
import ReactDOM from "react-dom";

function MyForm() {
const [inputs, setInputs] = useState({});

const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}

const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}

return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}

ReactDOM.render(<MyForm />, document.getElementById('root'));
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

--

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React is better.

Dockerize React App

React Fragments

Debugging standalone JS files in VSCode

Keep your project scalable. How to structure your React app files?

What are Web Workers

How to use ngrok in Angular Project

Building a ready for production microservice in NestJS — Part 1: Creating a template

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sagarika Dalai

Sagarika Dalai

Software Engineer

More from Medium

Tesla Website Clone Using React.js | Source Code

Learn about ReactJS

Day01 - #100DaysOfCode - React Tutorial for Beginners

My First React Project!