Չեկբոքսներ և պայմանական ռենդերինգ React-ում

Եկեք կատարենք, որպեսզի՝ կախված չեկբոքսի նշված լինելուց, էկրանին ցուցադրվի կամ կոդի մի հատված, կամ մեկ այլ։ Դրա համար օգտագործենք պայմանական ռենդերինգը։

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  let message;
  if (checked) {
    message = <p>հաղորդագրություն 1</p>;
  } else {
    message = <p>հաղորդագրություն 2</p>;
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <div>{message}</div>
  </div>;
}

jsx<div>
  <h2>Ուռա, ձեզ արդեն 18 կա</h2>
  <p>
    այստեղ տեղադրված է բովանդակություն միայն մեծահասակների համար
  </p>
</div>

jsx<div>
  <p>
    ավաղ, ձեզ դեռ 18 տարեկան չեք:(
  </p>
</div>