Valeurs par défaut dans React

Parfois, il peut être nécessaire de faire en sorte que par défaut, une valeur soit déjà présente dans l'input. En même temps, il faut que seule la valeur initiale de l'input soit tirée de l'état, et que l'input lui-même ne soit pas lié à cet état.

Pour résoudre une telle tâche, il faut utiliser l'attribut defaultValue :

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

Pour les cases à cocher, il existe un attribut analogue defaultChecked, avec lequel on peut définir l'état initial :

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

Testez par vous-même le fonctionnement de ces attributs.