Отображение данных на основе троичного оператора в React

#javascript #reactjs #ecmascript-6 #react-hooks

#javascript #reactjs #ecmascript-6 #реагирующие хуки

Вопрос:

Мне нужно либо annualPlans или monthlyPlans сопоставить его в зависимости от того, isAnually верно это или нет. и какой самый безопасный способ ввести цену? Кстати, у меня есть кнопка переключения, которая переключается между annualPlans и monthlyPlans.

Как это сделать?

Вот мой код ниже

 {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>
    ));
}
 

Ответ №1:

Перед вызовом вам нужно заключить ваше троичное условие в круглые скобки .map() .

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