Bekerja dengan Radio di React

Bekerja dengan radio radio agak berbeda, misalnya, dari kotak centang. Masalahnya adalah beberapa radio akan memiliki state yang sama, tetapi value yang berbeda.

Oleh karena itu, cara kerjanya adalah sebagai berikut: setiap tombol radio dalam atribut value menuliskan nilainya sendiri, dan dalam atribut checked - kondisi khusus yang memeriksa, apakah state sama dengan nilai tertentu. Jika sama - tombol radio akan menjadi tercentang, dan jika tidak sama - akan menjadi tidak tercentang.

Berikut implementasi dari yang dijelaskan:

function App() {
	const [value, setValue] = useState(1);
	
	function changeHandler(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input
			type="radio"
			name="radio"
			value="1"
			checked={value === '1' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="2"
			checked={value === '2' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="3"
			checked={value === '3' ? true : false}
			onChange={changeHandler}
		/>
	</div>
}

Diberikan 3 tombol radio. Diberikan sebuah paragraf. Buatlah sehingga nilai dari tombol radio yang dipilih ditampilkan dalam paragraf ini.

Dengan menggunakan tombol radio, tanyakan kepada pengguna bahasa pemrograman favoritnya. Tampilkan pilihannya dalam paragraf. Jika bahasa yang dipilih adalah JavaScript, pujilah pengguna.