Forms (adding, handling, submitting): event.target.name and event.target.event, React Memo; components (TextArea, Drop down list SELECT)

📖 Theory

Who owns the text in the box?

FestConnect needs a registration FORM: a name field, an event dropdown, a submit button. In plain HTML, the browser owns the input's text, and you read it only when you ask.

React does it differently, and the difference is the whole lesson. In React, the COMPONENT owns the input's value: it lives in state, the input displays it, and every keystroke updates the state. This is a controlled component, and it makes the component the single source of truth for the form's data. Master this one pattern and every React form, inputs, textareas, dropdowns, works the same way.

📖 Theory

The controlled component pattern

A controlled component ties an input's value to component STATE:

<input value={name} onChange={e => setName(e.target.value)} />

Read it as a loop:

• the input DISPLAYS the state value (value={name})
• typing fires onChange, which reads the new text from `e.target.value` and updates the state (setName(...))
• the state change re-renders the input with the new value

So the state is ALWAYS in sync with what the user sees: it is the single source of truth. (setName comes from useState, a hook covered fully next lesson; here it just holds the form value.) When you need the data, for submit or validation, you read it from state, not from the DOM.

⌨️ Practical

A controlled registration form

function RegisterForm() {
  const [name, setName] = React.useState("");
  const [event, setEvent] = React.useState("Garba Night");

  function handleSubmit(e) {
    e.preventDefault();          // stop the browser's page reload
    alert(name + " registered for " + event);
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* controlled input: value from state, onChange updates state */}
      <input value={name} onChange={e => setName(e.target.value)} />

      {/* select (dropdown) is controlled the same way */}
      <select value={event} onChange={e => setEvent(e.target.value)}>
        <option>Garba Night</option>
        <option>Coding Contest</option>
      </select>

      <button type="submit">Register</button>
    </form>
  );
}

This example runs in Gri-Learn on the web, where you can edit it and see the output.

📖 Theory

Submit, and the multi-field trick

Submitting: put onSubmit on the <form> and call `e.preventDefault()` first: this STOPS the browser's default behaviour of reloading the page on submit, which would wipe your React state. Forgetting preventDefault is why a React form 'flashes and loses everything' on submit.

textarea and select are controlled exactly like inputs (value + onChange), even though plain HTML treats them differently (textarea uses inner text, select uses a selected attribute): React unifies them all under the value/onChange pattern.

e.target.name: when one handler manages MANY fields, e.target.name tells you WHICH input changed (its name attribute), so a single onChange can update the right piece of state.

React.memo wraps a component to SKIP re-rendering when its props have not changed: a performance optimization for expensive components.

🧩 Quiz

In a React controlled input, where does the input's current value actually live, and what keeps it in sync?

1. In the DOM only; React reads it when needed
2. In component STATE; the input shows the state value and onChange updates the state on every keystroke
3. In a global variable shared by all components
4. Nowhere; React forms cannot hold values

💭 Think first

The form that reloaded and lost everything

A student's React registration form clears all fields and the page flickers every time they click Submit. What single line is missing, and why does that cause it? Then tap.

⚠️ Watch out

React form traps

Forgetting e.preventDefault(): the page reloads on submit and state is lost.

Uncontrolled inputs by accident: an input with no value/onChange is uncontrolled; for controlled behaviour, wire both.

Reading the DOM instead of state: in controlled components, read the value from state, not by querying the DOM.

textarea/select the HTML way: in React they use value + onChange, not inner text or the selected attribute.

Mutating state directly: always use the setter (setName), never assign to the state variable.

📖 Theory

State appeared; now master it

You have been using useState to hold form values, but state is React's deepest and most important idea, and it comes with a whole family of tools called HOOKS. The final React lesson covers them: useState (state), useEffect (side effects), useContext, useRef, and more, plus building your own custom hooks. Hooks are how modern React components hold state and logic, and they complete FestConnect's front-end. State was a taste; hooks are the meal.

✅ Summary

Key takeaways

• React forms use controlled components: the input's value lives in state, tied via value={x} and onChange.
• Pattern: value={name} onChange={e => setName(e.target.value)}: state is the single source of truth.
• Read the typed value with e.target.value; e.target.name identifies which field changed (for one shared handler).
• On submit, call e.preventDefault() first to stop the browser reloading the page (which would wipe state).
• textarea and select are controlled the same way (value + onChange), unlike plain HTML.
• React.memo skips re-rendering a component when its props have not changed (optimization).
• Memory hook: controlled input mirrors state, onChange updates it, preventDefault on submit.