Travailler avec les checkbox dans React

Travailler avec les checkbox suit également un principe similaire, seulement au lieu de l'attribut value nous indiquons l'attribut checked. Si on passe true à cet attribut - alors la checkbox sera cochée, et si false - ne sera pas cochée :

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> coché
		<input type="checkbox" checked={false} /> non coché
	</div>;
}

Généralement, l'état (state) contenant une valeur booléenne est passé à l'attribut checked :

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

De même que pour travailler avec les inputs, si on définit rigidement la valeur de l'attribut checked - l'état de la checkbox ne pourra pas être modifié. Pour un fonctionnement correct, nous changerons son état sur la valeur opposée à chaque modification de la checkbox :

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // on inverse l'état
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Nous pouvons simplifier :

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

Affichons l'état de la checkbox dans un paragraphe, en utilisant l'opérateur ternaire :

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>état : {checked ? 'coché' : 'non coché'}</p>
	</div>;
}

Une checkbox, un bouton et un paragraphe sont donnés. Lors d'un clic sur le bouton, si la checkbox est cochée, affichez dans le paragraphe un texte de salutation à l'utilisateur, et si elle n'est pas cochée - un texte d'au revoir.

À l'aide de trois checkbox, demandez à l'utilisateur de choisir les langages qu'il connaît : html, css et js. Affichez le résultat du choix pour chaque langage dans des paragraphes séparés.