Checkboxi un nosacījuma renderēšana React
Izveidosim tā, lai atkarībā no checkboxa atzīmes, ekrānā tiktu parādīts vai nu viens koda gabaliņš, vai cits. Izmantosim tam nosacījuma renderēšanu:
function App() {
const [checked, setChecked] = useState(true);
let message;
if (checked) {
message = <p>ziņojums 1</p>;
} else {
message = <p>ziņojums 2</p>;
}
return <div>
<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
<div>{message}</div>
</div>;
}
Dots checkboxs. Ar checkboxa palīdzību jautājiet lietotājam, vai viņam jau ir 18 gadu. Ja checkboxs ir atzīmēts, parādiet lietotājam šādu koda bloku:
<div>
<h2>Urā, jums jau ir 18</h2>
<p>
šeit atrodas saturs tikai pieaugušajiem
</p>
</div>
Bet ja checkboxs nav atzīmēts - tad šādu:
<div>
<p>
diemžēl, jums vēl nav 18 gadu:(
</p>
</div>
Dots checkboxs un rindkopa. Ja checkboxs ir atzīmēts, lai rindkopa ir redzama ekrānā, bet ja nav atzīmēts - paslēpiet to.
