Λογική τιμή στην κατάσταση στο 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)}>κουμπί</button>
  </div>;
}

Ας τροποποιήσουμε τον κώδικά μας έτσι ώστε το πρώτο πάτημα στο κουμπί να προσθέτει στο καλάθι και το δεύτερο - να αφαιρεί από αυτό:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'στο καλάθι' : 'όχι στο καλάθι'}</span>
    <button onClick={() => setInCart(!inCart)}>κουμπί</button>
  </div>;
}