React හි state හි තාර්කික අගය

අපි inCart state එකක් සාදමු, එය නිෂ්පාදනය කරත්තයේ තිබේද නැද්ද යන්න පෙන්වයි:

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

false අගය යන්නෙන් අදහස් කරන්නේ නිෂ්පාදනය කරත්තයේ නොමැති බවත්, true අගය යන්නෙන් අදහස් කරන්නේ කරත්තයේ ඇති බවත් වේ. ත්‍යාගශීලී ක්‍රියාකරුවා භාවිතා කර මේ ගැන තොරතුරු ප්‍රදර්ශනය කරමු:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'කරත්තයේ ඇත' : 'කරත්තයේ නැත'}</span>
  </div>;
}

දැන් අපි බොත්තමක් සාදමු, එය එබූ විට නිෂ්පාදනය කරත්තයට එකතු වේ:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'කරත්තයේ ඇත' : 'කරත්තයේ නැත'}</span>
    <button onClick={() => setInCart(true)}>බොත්තම</button>
  </div>;
}

අපගේ කේතය විචලනය කරමු, එවිට පළමු අවස්ථාවේ එබීම කරත්තයට එකතු කරන අතර දෙවන අවස්ථාවේ එබීම - එයින් ඉවත් කරයි:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'කරත්තයේ ඇත' : 'කරත්තයේ නැත'}</span>
    <button onClick={() => setInCart(!inCart)}>බොත්තම</button>
  </div>;
}