Lists, keys and forms: Frontend Web Development (Expert)

Rendering a list with map

javascript

const dishes = [
  { id: 'd1', name: 'Masala dosa', price: 90 },
  { id: 'd2', name: 'Veg biryani', price: 160 },
  { id: 'd3', name: 'Idli', price: 40 },
];

function Menu() {
  return (
    <ul>
      {dishes.map((dish) => (
        <li key={dish.id}>
          {dish.name} - Rs {dish.price}
        </li>
      ))}
    </ul>
  );
}

map turns each dish into an <li>; key={dish.id} identifies each one (React code, runs in a React project)

Keys

Each item in a list needs a key prop: a string or number that is unique among its siblings and stays the same for that item across renders. React uses keys to match items between renders, so it knows which item was added, removed or moved, and keeps each item's state with the right item.

Think of it like this: Keys are like roll numbers in a class. If students change benches, the teacher still knows who is who by roll number. Using the array index as a key is like calling students by bench position: when one student leaves, everyone after them gets the wrong name.

Careful: Do not use the array index as a key when the list can be filtered, sorted, or have items added or removed: React may keep typed text or a ticked checkbox on the wrong row. Never use Math.random() as a key either: a new key on every render makes React throw away and rebuild every item. Use an id from your data, or create one with crypto.randomUUID() when the item is created.

Derived data: calculate, do not store twice

If a value can be calculated from props or state, calculate it while rendering. Do not keep a filteredDishes array in state next to dishes and the search text: you would have to update both every time, and sooner or later they disagree. Keep the minimum in state (the dishes and the search text) and derive the rest.

javascript

function MenuPage({ dishes }) {
  const [query, setQuery] = useState('');
  const [vegOnly, setVegOnly] = useState(false);

  // derived on every render, never stored in state
  const visible = dishes
    .filter((d) => d.name.toLowerCase().includes(query.trim().toLowerCase()))
    .filter((d) => !vegOnly || d.veg)
    .sort((a, b) => a.price - b.price);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} aria-label="Search dishes" />
      <p>{visible.length} dishes</p>
      {/* render visible with map and key */}
    </>
  );
}

visible is worked out from dishes, query and vegOnly every time (React code, runs in a React project)

Tip: sort() changes the array it is called on. Sort a copy: filter already gives a new array, or use [...list].sort(...) or list.toSorted(...). Sorting a props or state array in place would mutate it.

Controlled inputs

A controlled input takes its value from state and updates that state on every change: value={name} and onChange={(e) => setName(e.target.value)}. The state is then the single source of truth, so you can check it, clear it or fill it from code at any time.

javascript

function AddressForm({ onSave }) {
  const [values, setValues] = useState({ name: '', mobile: '', pin: '' });
  const [errors, setErrors] = useState({});

  function handleChange(e) {
    const { name, value } = e.target;
    setValues((v) => ({ ...v, [name]: value }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    const found = validate(values); // a plain function, see the task below
    setErrors(found);
    if (Object.keys(found).length === 0) onSave(values);
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <label htmlFor="pin">PIN code</label>
      <input
        id="pin"
        name="pin"
        inputMode="numeric"
        value={values.pin}
        onChange={handleChange}
        aria-invalid={errors.pin ? true : undefined}
        aria-describedby={errors.pin ? 'pin-error' : undefined}
      />
      {errors.pin && <p id="pin-error" className="error">{errors.pin}</p>}
      {/* the same for name and mobile */}
      <button type="submit">Save address</button>
    </form>
  );
}

One state object for the whole form; [name]: value updates the field whose name attribute matches (React code, runs in a React project)

The submit handler works like the one you wrote in the DOM module: stop the page reload with preventDefault, check the values, show errors, and only then send. In React 19 you can also pass a function to <form action={...}>, and React calls it with the form's FormData. Frameworks build on that, but onSubmit with preventDefault works everywhere and is still very common.

Careful: An input with value but no onChange cannot be typed into, and React prints a warning. Either add onChange, or use defaultValue for an uncontrolled input that the browser manages.

Accessible forms in React

Every input needs a visible label. In JSX, link it with htmlFor (for is a reserved word in JavaScript), matching the input's id.
In a component used many times, create a unique id with the useId hook instead of typing one, so two copies never share an id.
Show errors as text next to the field, link it with aria-describedby, and set aria-invalid on the input.
Use a real <button type="submit"> inside a <form>, so the Enter key and screen readers work.
Choose the right input type and inputMode (email, tel, numeric) so phones show the right keyboard.

javascript

import { useId } from 'react';

function TextField({ label, ...inputProps }) {
  const id = useId();
  return (
    <div className="field">
      <label htmlFor={id}>{label}</label>
      <input id={id} {...inputProps} />
    </div>
  );
}

useId gives every copy of TextField its own id, so each label points to the right input (React code, runs in a React project)

Lists, keys and forms

Explanation

Rendering a list with map

Keys

Derived data: calculate, do not store twice

Controlled inputs

Accessible forms in React

Watch the lesson

In real life: The address step of a checkout

Practice (0/3 done)

Quick quiz

Read more (free)