Wartości domyślne w React

Czasami może zaistnieć potrzeba, aby domyślnie w polu wprowadzania już była jakaś wartość. Jednocześnie konieczne jest, aby ze stanu zostało wzięte tylko początkowa wartość pola, a samo pole nie byłoby powiązane z tym stanem.

Aby rozwiązać takie zadanie, należy skorzystać z atrybutu defaultValue:

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

Dla pól wyboru (checkbox) istnieje analogiczny atrybut defaultChecked, za pomocą którego można ustawić stan początkowy:

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