Trabajo con checkbox en React

El trabajo con checkbox también se realiza de manera similar, solo que en lugar del atributo value indicamos el atributo checked. Si pasamos true a este atributo, el checkbox estará marcado, y si pasamos false - no estará marcado:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> marcado
		<input type="checkbox" checked={false} /> no marcado
	</div>;
}

Normalmente al atributo checked se le pasa un estado que contiene un valor lógico:

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

Al igual que cuando se trabaja con inputs, si se establece rígidamente el valor del atributo checked - no se podrá cambiar el estado del checkbox. Para un funcionamiento correcto, al cambiar el checkbox cambiaremos su estado al valor opuesto al actual:

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

Podemos simplificar:

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

Mostremos el estado del checkbox en un párrafo, usando el operador ternario:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>estado: {checked ? 'marcado' : 'no marcado'}</p>
	</div>;
}

Se dan un checkbox, un botón y un párrafo. Al hacer clic en el botón, si el checkbox está marcado, muestre en el párrafo un texto de saludo al usuario, y si no está marcado, un texto de despedida.

Con tres checkboxes, pida al usuario que elija los lenguajes que conoce: html, css y js. Muestre el resultado de la selección de cada lenguaje en párrafos separados.