Thamani ya Kimantiki Katika Hali ya React

Wacha tufanye hali inCart, ambayo itaonyesha ikiwa bidhaa iko kwenye kikapu au la:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    
  </div>;
}

Wacha thamani false iweze kumaanisha kuwa bidhaa hayo kwenye kikapu, na thamani true - kuwa iko kwenye kikapu. Tuonyeshe taarifa kuhusu hili kwa kutumia kiendeshaji ternary:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'kwenye kikapu' : 'si kwenye kikapu'}</span>
  </div>;
}

Sasa tufanye kifungo, ubonyeze ambao bidhaa itaongezwa kwenye kikapu:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'kwenye kikapu' : 'si kwenye kikapu'}</span>
    <button onClick={() => setInCart(true)}>kifungo</button>
  </div>;
}

Wacha tubadilishe msimbo wetu ili ubonyezo wa kwanza kwenye kifungo kuongeze kwenye kikapu, na wa pili - kuondoa kutoka humo:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'kwenye kikapu' : 'si kwenye kikapu'}</span>
    <button onClick={() => setInCart(!inCart)}>kifungo</button>
  </div>;
}