Robert 雜記

// 修正前 connect()
const gateway = braintree.connect({
  environment: braintree.Environment.Sandbox,
  merchantId: process.env.BRAINTREE_MERCHANT_ID,
  publicKey: process.env.BRAINTREE_PUBLIC_KEY,
  privateKey: process.env.BRAINTREE_PRIVATE_KEY,
});

// 修正後 BraintreeGateway()
const gateway = new braintree.BraintreeGateway({
  environment: braintree.Environment.Sandbox,
  merchantId: process.env.BRAINTREE_MERCHANT_ID,
  publicKey: process.env.BRAINTREE_PUBLIC_KEY,
  privateKey: process.env.BRAINTREE_PRIVATE_KEY,
});

export default function Checkbox({ categories, handleFilters }) {
  const [checked, setChecked] = useState([]);

  // ***--->>> event include parameter
  const handleToggle = (c) => (e) => {
    // return the first index or -1
    const currentCategoryId = checked.indexOf(c);
    const newCheckedCategoryId = [...checked];
    // if current checked was not already in checked state > push
    // else pull/take off
    if (currentCategoryId === -1) {
      newCheckedCategoryId.push(c);
    } else {
      newCheckedCategoryId.splice(currentCategoryId, 1);
    }
    setChecked(newCheckedCategoryId);
    handleFilters(newCheckedCategoryId);
  };

  return categories.map((c, i) => (
    <li key={i} className="list-unstyled">
      {/* ***--->>> event include parameter */}
      <input
        onChange={handleToggle(c._id)}
        value={checked.indexOf(c._id) === -1}
        type="checkbox"
        className="form-check-input"
      />
      <label htmlFor="form-check-label">{c.name}</label>
    </li>
  ));
}