React - Conditional Element in a map Function

Question

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

Victor · Accepted Answer · 2020-01-21 04:39:39Z

1

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)" }
    },
}));

answered Jan 21, 2020 at 4:39

Victor

14.7k24 gold badges87 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mukesh210 Over a year ago

Since Error is not mentioned in Question, it is better to point out that we need to import React from 'react'; too

Collectives™ on Stack Overflow

React - Conditional Element in a map Function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related