Kryssrutor och villkorsstyrd rendering i React

Låt oss göra så att beroende på om en kryssruta är markerad eller inte, visas antingen en bit kod på skärmen eller en annan. Vi använder villkorsstyrd rendering för detta:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  let message;
  if (checked) {
    message = <p>meddelande 1</p>;
  } else {
    message = <p>meddelande 2</p>;
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <div>{message}</div>
  </div>;
}

jsx<div>
  <h2>Hurra, du är redan 18 år</h2>
  <p>
    här finns innehåll endast för vuxna
  </p>
</div>

jsx<div>
  <p>
    tyvärr, du är inte 18 år än:(
  </p>
</div>