Lucrul cu radio în React

Lucrul cu radio radio diferă oarecum, de exemplu, de la aceiași checkbox-uri. Problema este că la mai multe radio-uri va fi aceeași stare, dar diferite value.

Prin urmare, lucrul se desfășoară în felul următor: fiecărui buton radio în atributul value își scrie valoarea sa, iar în atributul checked - o condiție specială, care verifică, dacă starea este egală cu o anumită valoare. Dacă este egal - butonul radio va deveni bifat, iar dacă nu este egal - va fi nebifat.

Iată implementarea descrisă:

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>
}

Sunt date 3 butoane radio. Este dat un paragraf. Faceți astfel încât valoarea butonului radio selectat să fie afișată în acest paragraf.

Cu ajutorul butoanelor radio întrebați utilizatorul despre limbajul său de programare preferat. Afișați alegerea sa în paragraf. Dacă este selectat limbajul JavaScript, lăudați utilizatorul.