Reactда стейтдаги логик қиймат

Келгинг, стейтда inCart ни яратайлик, у маҳсулот саватда борми ёки йўқмилигини кўрсатади:

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)}>btn</button>
  </div>;
}

Бизнинг кодни шундай модификация қилайликки, биринчи босилганда тугма саватга қўшса, иккинчи босилганда - ундан ўчирилсин:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'саватда' : 'саватда эмас'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}