tengo algo como esto

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

Dentro de la función de return de mi componente tengo:

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

Tengo un estado que cambió según la presión del botón. por ejemplo setColState('col2') podría configurarse después de presionar el botón correspondiente.

Me gustaría poder cambiar entre renderizar item.col1 y item.col1 en base a eso. He estado probando diferentes formas de lograr esto sin suerte. desde la incrustación

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

Probé una función que devuelve <div>{return item.col2}</div> y nombro el estado y el elemento de la matriz de la misma manera que puedo hacer <div>{return item[ColState]</div> pero no parece para que cualquiera funcione.

No estoy usando redux e idealmente lo evitaría ya que soy un novato de reacción total.