CODEWITHSUNDEEP
javascriptreactjsecmascript-6react-hooks
Joseph
Joseph

Reputation: 7755

Displaying Data Based on Ternary Operator in React

I need either annualPlans or monthlyPlans to map it depending if isAnually is true or not. and what is the safest way to put in the price? I have a toggle button by the way which switches between the annualPlans and monthlyPlans.

How do it do it?

Here's my code below

{isAnnually
  ? annualPlans
  : monthlyPlans.map((p, index) => (
      <Fragment key={index}>
        <PlanCard
          id={p.value}
          current={p.current}
          title={p.name}
          price={`$ ${
           p.annual_price ? p.annual_price : p.monthly_price
           }`}
        />
      </Fragment>
    ));
}

Upvotes: 0

Views: 72

Answers (1)

Mark Skelton
Mark Skelton

Reputation: 3891

You'll need to wrap your ternary condition in parenthesis before you call .map().

{(isAnnually ? annualPlans : monthlyPlans).map((p, index) => (
  <Fragment key={index}>
    <PlanCard
      id={p.value}
      current={p.current}
      title={p.name}
    />
  </Fragment>
))}

Upvotes: 1

Related Questions