Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 5 · 7 / 9Forms and inputs
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Forms and inputs
01 / 09Overview

Forms and inputs

You'll learn to read what someone types with a controlled input, and to handle a form submit.

Why it mattersLogin screens, search boxes and "add a task" boxes are all forms, in React and in React Native.
about 90 min·needs: State with useState, Events in React
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
<input>: controlling an input with a state variablereact.dev · official docs · 15 min · English
MMamun's noteRead "Controlling an input with a state variable" and try the live example. Then read the troubleshooting question "My text input doesn't update when I type into it".
Video
Full React tutorial #27: controlled inputs (forms)YouTube · Net Ninja · 6 min · English
MMamun's noteWatch 4:08 to the end. He connects a title, a body and a select box to state with value and onChange. Skip the styling part before it.
Video
Full React tutorial #28: submit eventsYouTube · Net Ninja · 3 min · English
MMamun's noteThree minutes on onSubmit and e.preventDefault(). Watch all of it.
03 / 09

Explanation

You want an "Add task" box for your class to-do list. You need to know what the person typed, and do something when they press Add.

In React, the text in the box lives in state. The input shows that state, and every key press updates it. This is called a controlled input: React is in control of what the box shows.

const [title, setTitle] = useState("");
 
<input value={title} onChange={(e) => setTitle(e.target.value)} />

value={title} says "show what is in state". onChange runs on every key press. e is the event, and e.target.value is the text the box would now have. You save it, React renders again, and the box shows the new text. Typing "Lab" is three loops of that.

For the Add button, wrap the input in a <form> and use onSubmit. Pressing Enter also submits.

function handleSubmit(e) {
  e.preventDefault();
  addTask(title);
  setTitle("");
}

By default, a browser form reloads the page on submit. e.preventDefault() stops the reload, so your state stays. Setting the title back to "" clears the box.

People often set value and forget onChange. The box then always shows the same state, so typing does nothing. React warns about a read-only field in the console.

When you read a form, find the state for each input, its onChange, and what onSubmit does with it.

Words to recognise
controlled inputonChangee.target.valueonSubmite.preventDefault()
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

App.jsx6 notes
1import { useState } from "react";
2
3export default function AddTask({ onAdd }) {
const [title, setTitle] = useState("");
Mentor note · line 4
The text in the box lives here. It starts empty.
5
6 function handleSubmit(e) {
e.preventDefault();
onAdd(title);
setTitle("");
10 }
11
12 return (
13 <form onSubmit={handleSubmit}>
<input value={title} onChange={(e) => setTitle(e.target.value)} />
<button>Add</button>
16 </form>
17 );
18}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1function NameBox() {
2  const [name, setName] = useState("");
3 
4  return (
5    <div>
6      <input value={name} onChange={(e) => setName(e.target.value.toUpperCase())} />
7      <p>Hello, {name}</p>
8    </div>
9  );
10}
You type "rafi" into the box. What does the line below it show?
DrillFind the bug2 / 2
A sign-up form keeps all its fields in one object in state, and calls setForm(updateField(form, "name", "Rafi")). React only re-renders when it gets a new object. Fix updateField so it returns a new object and leaves the old one alone.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In onChange={(e) => setTitle(e.target.value)}, what is e.target.value?
  2. 2 / 3What happens if handleSubmit does not call e.preventDefault()?
  3. 3 / 3You write <input value={name} /> with no onChange. What happens when you type?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Forms and inputs?

09 / 09

Done

You can now
Read a controlled input and say what state holds after typing, and why a form needs preventDefault.
Next: useEffect Back to Phase 5
On this page
  1. 01Forms and inputs
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Forms and inputs
01 / 09Overview

Forms and inputs

You'll learn to read what someone types with a controlled input, and to handle a form submit.

Why it mattersLogin screens, search boxes and "add a task" boxes are all forms, in React and in React Native.
about 90 min·needs: State with useState, Events in React
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
<input>: controlling an input with a state variablereact.dev · official docs · 15 min · English
MMamun's noteRead "Controlling an input with a state variable" and try the live example. Then read the troubleshooting question "My text input doesn't update when I type into it".
Video
Full React tutorial #27: controlled inputs (forms)YouTube · Net Ninja · 6 min · English
MMamun's noteWatch 4:08 to the end. He connects a title, a body and a select box to state with value and onChange. Skip the styling part before it.
Video
Full React tutorial #28: submit eventsYouTube · Net Ninja · 3 min · English
MMamun's noteThree minutes on onSubmit and e.preventDefault(). Watch all of it.
03 / 09

Explanation

You want an "Add task" box for your class to-do list. You need to know what the person typed, and do something when they press Add.

In React, the text in the box lives in state. The input shows that state, and every key press updates it. This is called a controlled input: React is in control of what the box shows.

const [title, setTitle] = useState("");
 
<input value={title} onChange={(e) => setTitle(e.target.value)} />

value={title} says "show what is in state". onChange runs on every key press. e is the event, and e.target.value is the text the box would now have. You save it, React renders again, and the box shows the new text. Typing "Lab" is three loops of that.

For the Add button, wrap the input in a <form> and use onSubmit. Pressing Enter also submits.

function handleSubmit(e) {
  e.preventDefault();
  addTask(title);
  setTitle("");
}

By default, a browser form reloads the page on submit. e.preventDefault() stops the reload, so your state stays. Setting the title back to "" clears the box.

People often set value and forget onChange. The box then always shows the same state, so typing does nothing. React warns about a read-only field in the console.

When you read a form, find the state for each input, its onChange, and what onSubmit does with it.

Words to recognise
controlled inputonChangee.target.valueonSubmite.preventDefault()
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

App.jsx6 notes
1import { useState } from "react";
2
3export default function AddTask({ onAdd }) {
const [title, setTitle] = useState("");
Mentor note · line 4
The text in the box lives here. It starts empty.
5
6 function handleSubmit(e) {
e.preventDefault();
onAdd(title);
setTitle("");
10 }
11
12 return (
13 <form onSubmit={handleSubmit}>
<input value={title} onChange={(e) => setTitle(e.target.value)} />
<button>Add</button>
16 </form>
17 );
18}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1function NameBox() {
2  const [name, setName] = useState("");
3 
4  return (
5    <div>
6      <input value={name} onChange={(e) => setName(e.target.value.toUpperCase())} />
7      <p>Hello, {name}</p>
8    </div>
9  );
10}
You type "rafi" into the box. What does the line below it show?
DrillFind the bug2 / 2
A sign-up form keeps all its fields in one object in state, and calls setForm(updateField(form, "name", "Rafi")). React only re-renders when it gets a new object. Fix updateField so it returns a new object and leaves the old one alone.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In onChange={(e) => setTitle(e.target.value)}, what is e.target.value?
  2. 2 / 3What happens if handleSubmit does not call e.preventDefault()?
  3. 3 / 3You write <input value={name} /> with no onChange. What happens when you type?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Forms and inputs?

09 / 09

Done

You can now
Read a controlled input and say what state holds after typing, and why a form needs preventDefault.
Next: useEffect Back to Phase 5
On this page
  1. 01Forms and inputs
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want an "Add task" box for your class to-do list. You need to know what the person typed, and do something when they press Add.

In React, the text in the box lives in state. The input shows that state, and every key press updates it. This is called a controlled input: React is in control of what the box shows.

const [title, setTitle] = useState("");
 
<input value={title} onChange={(e) => setTitle(e.target.value)} />

value={title} says "show what is in state". onChange runs on every key press. e is the event, and e.target.value is the text the box would now have. You save it, React renders again, and the box shows the new text. Typing "Lab" is three loops of that.

For the Add button, wrap the input in a <form> and use onSubmit. Pressing Enter also submits.

function handleSubmit(e) {
  e.preventDefault();
  addTask(title);
  setTitle("");
}

By default, a browser form reloads the page on submit. e.preventDefault() stops the reload, so your state stays. Setting the title back to "" clears the box.

People often set value and forget onChange. The box then always shows the same state, so typing does nothing. React warns about a read-only field in the console.

When you read a form, find the state for each input, its onChange, and what onSubmit does with it.

Words to recognise
controlled inputonChangee.target.valueonSubmite.preventDefault()

You want an "Add task" box for your class to-do list. You need to know what the person typed, and do something when they press Add.

In React, the text in the box lives in state. The input shows that state, and every key press updates it. This is called a controlled input: React is in control of what the box shows.

const [title, setTitle] = useState("");
 
<input value={title} onChange={(e) => setTitle(e.target.value)} />

value={title} says "show what is in state". onChange runs on every key press. e is the event, and e.target.value is the text the box would now have. You save it, React renders again, and the box shows the new text. Typing "Lab" is three loops of that.

For the Add button, wrap the input in a <form> and use onSubmit. Pressing Enter also submits.

function handleSubmit(e) {
  e.preventDefault();
  addTask(title);
  setTitle("");
}

By default, a browser form reloads the page on submit. e.preventDefault() stops the reload, so your state stays. Setting the title back to "" clears the box.

People often set value and forget onChange. The box then always shows the same state, so typing does nothing. React warns about a read-only field in the console.

When you read a form, find the state for each input, its onChange, and what onSubmit does with it.

Words to recognise
controlled inputonChangee.target.valueonSubmite.preventDefault()