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.