Reactでのチェックボックスの扱い方

チェックボックスの扱いも同様の原則に従いますが、 value属性の代わりに checked属性を指定します。この属性にtrueを渡せばチェックボックスはチェックされ、 falseを渡せばチェックされません：

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> チェック済み
		<input type="checkbox" checked={false} /> 未チェック
	</div>;
}

通常、checked属性には論理値を持つステートが渡されます：

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

入力欄の扱いと同様に、 checked属性の値を固定してしまうと、チェックボックスの状態を変更できなくなります。正しく動作させるには、チェックボックスの変更時にそのステートを反転させます：

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // ステートを反転
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

簡略化できます：

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

三項演算子を使って、チェックボックスの状態を段落に表示してみましょう：

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>状態: {checked ? 'チェック済み' : '未チェック'}</p>
	</div>;
}

チェックボックス、ボタン、段落があります。ボタンがクリックされた時、チェックボックスがチェックされていれば段落に挨拶のテキストを、チェックされていなければ別れのテキストを表示してください。

3つのチェックボックスを使用して、ユーザーに知っている言語（html、css、js）を選択させてください。各言語の選択結果は、別々の段落に出力してください。