Standaardwaarden in React

Soms kan het nodig zijn om ervoor te zorgen dat er standaard al een waarde in een invoerveld staat. Tegelijkertijd moet alleen de initiële waarde van het invoerveld uit de state worden gehaald, en mag het invoerveld niet gekoppeld zijn aan deze state.

Om een dergelijke taak op te lossen, moet je gebruik maken van het attribuut defaultValue:

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

Voor checkboxen bestaat er een vergelijkbaar attribuut defaultChecked, waarmee je de initiële status kunt instellen:

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