CODEWITHSUNDEEP
javascriptreactjsconditional-statements
Koala7
Koala7

Reputation: 1414

React - Conditional Element in a map Function

I want to display a different link in this map function, If x is for example 3 i want to show<Link>Put</Link> otherwise i want to show <Link>Remove</Link>. I am trying to do some conditional but i get errors, how can i write it down?

const mapWorkplace = (arr: SuggestedWorkplace[], deallocation: boolean) =>
  arr.map((x, i) => ({
    ...x,
    action: <Link>Put</Link> || <Link>Remove</Link> ,
    __props: {
      style: { background: !(i % 2) ? "#fff" : "rgba(233, 249, 249, .6)" }
    }
  }));

Upvotes: 1

Views: 46

Answers (1)

Victor
Victor

Reputation: 14632

Assuming your error comes from the value of action, you can do it using a conditional operator:

const mapWorkplace = (arr: SuggestedWorkplace[], deallocation: boolean) =>
  arr.map((x, i) => ({
    ...x,
    action: x === 3 ? <Link>Put</Link> : <Link>Remove</Link> ,
    __props: {
      style: { background: !(i % 2) ? "#fff" : "rgba(233, 249, 249, .6)" }
    },
}));

Upvotes: 1

Related Questions