Bekerja dengan Checkbox di React

Bekerja dengan checkbox juga dilakukan dengan prinsip yang serupa, hanya saja alih-alih atribut value, kita tentukan atribut checked. Jika atribut ini diberikan true - maka checkbox akan dicentang, dan jika false - tidak akan dicentang:

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

Biasanya, atribut checked diberikan state yang berisi nilai boolean:

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

Sama seperti saat bekerja dengan input, jika nilai atribut checked ditetapkan secara kaku - status checkbox tidak dapat diubah. Untuk berfungsi dengan benar, kita akan mengubah state-nya menjadi nilai yang berlawanan setiap kali checkbox berubah:

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

Kita dapat menyederhanakannya:

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

Mari kita tampilkan status checkbox dalam paragraf, menggunakan operator ternary:

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

Diberikan sebuah checkbox, sebuah tombol, dan sebuah paragraf. Saat tombol diklik, jika checkbox dicentang, tampilkan di paragraf teks salam kepada pengguna, dan jika tidak dicentang - teks perpisahan.

Dengan menggunakan tiga checkbox, minta pengguna untuk memilih bahasa yang dikuasai: html, css dan js. Hasil pilihan untuk setiap bahasa tampilkan di paragraf terpisah.