Výchozí hodnoty v Reactu

Někdy může být potřeba, aby v inputu již byla nějaká hodnota ve výchozím stavu. Zároveň je potřeba, aby ze stavu byla vzata pouze počáteční hodnota inputu, a samotný input nebyl k tomuto stavu připoután.

K vyřešení takového úkolu je třeba použít atribut defaultValue:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input defaultValue={value} />
  </div>;
}

Pro zaškrtávací políčka existuje podobný atribut defaultChecked, pomocí kterého lze nastavit výchozí stav:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" defaultChecked={checked} />
  </div>;
}