Rendering Lists and Building Forms

Rendering lists

Use .map() to turn an array of data into an array of JSX elements, each one needs a unique key prop so React can track it across re-renders.

function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
}

Controlled forms

A controlled input gets its displayed value from state, and updates that state on every keystroke:

function TaskForm({ onAdd }) {
  const [text, setText] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    onAdd(text);
    setText('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">Add</button>
    </form>
  );
}

event.preventDefault() stops the browser's default full-page reload on form submit, letting React handle it instead.