Εργασία με radio στο React

Η εργασία με τα radio radio διαφέρει κάπως, για παράδειγμα, από τα ίδια τα checkboxes. Το πρόβλημα είναι ότι πολλά radio θα έχουν την ίδια κατάσταση, αλλά διαφορετικό value.

Επομένως, η εργασία γίνεται ως εξής: σε κάθε κουμπί radio στο χαρακτηριστικό value γράφεται η δική του τιμή, και στο χαρακτηριστικό checked - μια ειδική συνθήκη που ελέγχει, αν η κατάσταση ισούται με μια συγκεκριμένη τιμή. Αν ισούται - το κουμπί radio θα γίνει επιλεγμένο, και αν δεν ισούται - θα είναι μη επιλεγμένο.

Ακολουθεί η υλοποίηση των παραπάνω:

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

Δίνονται 3 κουμπιά radio. Δίνεται μια παράγραφος. Κάντε έτσι ώστε η τιμή του επιλεγμένου κουμπιού radio να εμφανίζεται σε αυτήν την παράγραφο.

Με τη βοήθεια κουμπιών radio ρωτήστε τον χρήστη για την αγαπημένη του γλώσσα προγραμματισμού. Εμφανίστε την επιλογή του στην παράγραφο. Αν επιλεγεί η γλώσσα JavaScript, εκφράστε τον επαίνo σας στον χρήστη.