Reactでのラジオボタンの扱い

ラジオボタン radioの扱いは、例えばチェックボックスとは少し異なります。問題は、複数のラジオボタンが同じ状態（ステート）を持つ一方で、異なるvalueを持つことです。

したがって、以下のように作業を進めます：各ラジオボタンのvalue属性に独自の値を設定し、 checked属性には、ステートが特定の値と等しいかどうかをチェックする特別な条件を設定します。等しい場合、そのラジオボタンはチェックされた状態になり、等しくない場合はチェックされない状態になります。

以下に説明した内容の実装例を示します：

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つのラジオボタンがあります。段落があります。選択されたラジオボタンの値がこの段落に表示されるようにしてください。

ラジオボタンを使用して、ユーザーの好きなプログラミング言語を尋ねてください。ユーザーの選択を段落に表示してください。もしJavaScriptが選択された場合、ユーザーを褒めてください。