Capítulo 101 de 116
<option>, <progress>, <title>Three smaller built-in elements round out the form/document-metadata reference: <option> (a <select>'s choices, no independent controlled state of its own), <progress> (a determinate/indeterminate progress bar), and <title> (React-managed document title, hoistable from anywhere in the tree).
<option>: rendered as children of <select> (Ch 99); carries a value and its text content as the label, but — unlike <input>/<textarea>/<select> — has no controlled/uncontrolled selection state of its own, since selection is owned entirely by the parent <select>'s value.<progress>: value (a number between 0 and max, default max=1) renders a determinate bar; omitting value entirely (<progress />) renders an indeterminate/loading-style bar instead — useful for "in progress, duration unknown" states.<title>: React specifically supports rendering <title> anywhere in the component tree (not just literally in a <head> JSX structure) and hoists it to the document's actual <head> — letting a deeply nested route/page component set the browser tab title declaratively without manual DOM manipulation or a separate "head management" library.className, standard event handlers, etc.) alongside their element-specific behavior above.function ProductPage({ product, uploadProgress }) {
return (
<>
<title>{product.name} — Store</title>
<progress value={uploadProgress} max={100} />
</>
);
}
<option>'s selection state is never independently controlled — always manage selection through the parent <select>.<progress>'s value entirely (not value={null} or value={undefined} inconsistently) to get the indeterminate/loading visual.<title> can be rendered from any component depth and React hoists it correctly — no special "head" wrapper component is required.<select>): the parent element that owns <option>'s selection state.