Get ID of a Card element when it is selected

Question

I have an array

plans = [
0: {id: 2, identifier: "professional-2020", name: "professional", currency_code: "usd", price: "99.0"}
1: {id: 3, identifier: "free-2020", name: "free", currency_code: "usd", price: "0.0"}
2: {id: 4, identifier: "basic-2020", name: "basic", currency_code: "usd", price: "29.0"}
3: {id: 5, identifier: "standard-2020", name: "standard", currency_code: "usd", price: "59.0"}
4: {id: 6, identifier: "custom-2020", name: "custom", currency_code: "usd", price: "999.0"}]

I have created some Cards from this array

        <Card
          className="billing-plans__plans-card"
          size="normal"
          version="v2"
          title={plan.name}
          headerCenter={true}
          key={plan.id}
        >
          {matchPlan ? (
            <div className="billing-plans__current-plan-icon">
              <img src={greenCheck} alt="check" />
            </div>
          ) : null}
          <div className="billing-plans__plans-card-title">
            <sup>US$</sup>
            {plan.price}
            <sub>
              /<I18nText id="pricing.plans.misc.month" />
            </sub>
          </div>

          <div className="billing-plans__plans-card-actions">
            {!matchPlan ? (
              <button
                className="billing-plans__plans-card-actions-button"
                onClick={selectPlan}
              >
                <I18nText id="pricing.plans.actions.select" />
              </button>
            ) : null}
          </div>
        </Card>

Now I want to get the ID of the selected Card while I click on the Button in each of the Cards. May be I need to write a function and call it in onClick?

You should create a minimal reproducible example (preferably on [codesandbox](https://codesandbox.io/)) — hgb123, Aug 31 '20 at 15:45
Does this answer your question? [React js onClick can't pass value to method](https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method) — keikai, Aug 31 '20 at 16:33

score 2 · Accepted Answer · answered Aug 31 '20 at 15:50

2

Without a real code example this is all I can come up with:

const MyComponent = () => {
  const [selectedCard, setSelectedCard] = useState();

  return (
    {/* non-working simplified code, look at the onClick fn */}
    <Card
      className="billing-plans__plans-card"
      size="normal"
      version="v2"
      title={plan.name}
      headerCenter={true}
      key={plan.id}
      onClick={() => {
        setSelectedCard(plan.id)
      }}
    >
      ...
  </Card >
  )
};

answered Aug 31 '20 at 15:50

Dom

734
3
8

how should I use `selectedCard `? – ashfaqrafi Aug 31 '20 at 15:57
You have selectedCard as state and inside you have the id. You can do with it whatever you want to. What do you need to do with the ID of the selected card? – Dom Aug 31 '20 at 16:18
I will pass the id of the selected card to a put request body as a param. – ashfaqrafi Aug 31 '20 at 18:24
here is my put request body: ```const selectPlan = async selectedCard => { const { data } = await httpClient.put( routes.billing.changePlan.update({ id: selectedCardID, affiliate_id: affiliateId, }), ); if (data.error === null) { fetchPlans(); } };``` I will pass the selected card ID in the id param – ashfaqrafi Sep 01 '20 at 03:43

Get ID of a Card element when it is selected

1 Answers1