React တွင် State အတွင်းရှိ ယုတ္တိတန်သော တန်ဖိုး

ထည့်သွင်းစဉ်းစားကြပါစို့။ product သည် ဈေးခြင်းထဲတွင် ရှိ/မရှိ ပြသမည့် state <inCart> ကို ဖန်တီးကြပါစို့။

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

<false> တန်ဖိုးသည် product သည် ဈေးခြင်းထဲမှ မဟုတ်ကြောင်း၊ <true> တန်ဖိုးသည် ဈေးခြင်းထဲတွင် ရှိကြောင်း ဆိုလိုပါစေ။ ternary operator ကို အသုံးပြု၍ ဤအချက်အလက်ကို ထုတ်ပြကြပါစို့။

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'ဈေးခြင်းထဲတွင်' : 'ဈေးခြင်းထဲတွင် မဟုတ်'}</span>
  </div>;
}

ယခုအခါ နှိပ်လိုက်သည့်အခါ product ကို ဈေးခြင်းထဲသို့ ထည့်ပေးမည့် ခလုတ်တစ်ခု ဖန်တီးကြပါစို့။

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>;
}