как изменить класс bootstrap с изменением значений в реакции js?

Question

я хочу изменить класс bootstrap на запрос значения в реакции js ...?

const Card = ({ item }) => {

  return (
   if (item.approval === "pending") {
   <span className="badge badge-danger">{item.approval}</span>

   } else if (item.approval === "Appropriate") {
   <span className="badge badge-warning">{item.approval}</span>

   } else if (item.approval === "approved") { 
   <span className="badge badge-success">{item.approval}</span>
   }
  )
}

export default Card

Answer 1

Вы не можете использовать оператор if внутри return. Вам нужно использовать его снаружи.

Вы можете сделать это просто вот так.

const Card = ({ item }) => {
  let colorClassName = "badge-danger";
  if (item.approval === "Appropriate") colorClassName = "badge-warning";
  if (item.approval === "approved") colorClassName = "badge-success";

  return (
   <span className={`badge ${colorClassName}`}>{item.approval}</span>
  )
}

export default Card