How to use IF within map() in react to check which array element is rendered

Question

I have something like this

const stuff = [
  { id: "1", col1: 232, col2: 232 },
  { id: "2", col1: 400, col2: 650 },
  { id: "2", col1: 300, col2: 300 },
];

Within my component's return function I have:

{chartData.map((item, index) =>
    <div>{item.col1}%</div>
)}

I have state which changed based on button press. e.g. setColState('col2') might be set after the corresponding button is hit.

I'd like to be able to switch between rendering item.col1 and item.col1 based on that. I've been trying different ways of achieving this with no luck. From embedding

{chartData.map((item, index) =>
    <div>if(ColState=="col2"){return item.col2}</div>
    )}

I tried a function that returns <div>{return item.col2}</div> and naming the state and array element the same so I can do <div>{return item[ColState]</div> but can't seem to get any to work.

I'm not using redux and ideally would avoid it as I'm a total react rookie.

Just make your arrow function run a function block instead of auto-returning a value due to using the one-liner syntax. I.e. instead of `blah.map(x => y)`, you use `blah.map(x => { do(); things(); here(); andThen(); return y })`. — Mike 'Pomax' Kamermans, Sep 15 '21 at 21:21
You might also try a ternary `
{ColState=="col2" ? item.col2 : item.col1}
`. — Brian Thompson, Sep 15 '21 at 21:23
Or this version was close `
{return item[ColState]
` just remove the `return` - `
{item[ColState]
` — Brian Thompson, Sep 15 '21 at 21:26

How to use IF within map() in react to check which array element is rendered

0 Answers0