Trabalhando com checkbox em React

Trabalhar com checkbox também segue um princípio semelhante, só que em vez do atributo value, especificamos o atributo checked. Se passarmos true para este atributo - o checkbox será marcado, e se for false - não será marcado:

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

Geralmente, o estado (state) contendo um valor booleano é passado para o atributo checked:

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

Assim como ao trabalhar com inputs, se o valor do atributo checked for definido rigidamente - o estado do checkbox não poderá ser alterado. Para um funcionamento correto, vamos alterar o estado do checkbox para o valor oposto ao alterá-lo:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // invertemos o 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>;
}

Vamos exibir o estado do checkbox em um parágrafo, usando o operador ternário:

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

Dados um checkbox, um botão e um parágrafo. Ao clicar no botão, se o checkbox estiver marcado, exiba no parágrafo um texto de saudação ao usuário, e se não estiver marcado - um texto de despedida.

Usando três checkboxes, peça ao usuário para escolher os idiomas que ele conhece: html, css e js. Exiba o resultado da seleção de cada idioma em parágrafos separados.