retornar index de array fora do map

[thauealfredo]

Galera eu tenho um componente que monta linhas da tabela de acordo com um array que eu passo. Dentro desse array eu passo uma img com onClick, eu queria saber como posso pegar o index equivalente clicado

o item do array

Esse é o componente

[ninetails]

O segundo argumento do callback do Array.prototype.map é o índice do array. Vc pode repassar ele até a chamada da função no onClick

{arr.map((item, index) => (
  <Componente onClick={event => meuHandler(event, index)}>
    ...
  </Componente>
))}

[thauealfredo]

Eu achei um jeito, com uma gambiarra, testei com seu código mas ai n renderizou o botão. mas valeu

[wilsongomes-swe]

Xiii, gambiarra não heim rs Mas o correto pelo que você @thauealfredo descreveu, é como o @ninetails falou mesmo, você usa o segundo parametro do map... E só irá ter em todas as colunas se você colocar em todas as colunas. E o melhor dependendo de sua tabela é usar o id da entidade que está naquela linha e não o indice, dependendo do cenário.
Abraços!

[thauealfredo]

Como não dava para passar o index da forma que eu estava fazendo, eu fiz uma função que passo por callback, e nessa função eu retornava o elemento clicado, o pai desse elemento e o id dele que era o index(recurso técnico alternativo xD), mas só agora, no meio do banho, me dei conta que eu consigo passar o index nessa função de callback

[wilsongomes-swe]

Show, penso que era isto mesmo que o @ninetails mostrou ali, que bom que rolou ai, abraços!

[ninetails]

assim, ideal ideal mesmo seria vc botar um ID único na lista, pois mesmo o React não recomenda utilizar key em loops.

const arr = [
  // ...
  {
    id: "ID ÚNICO, TALVEZ UM HASH",
    value: (row, col) => (
      <button onClick={(event) => customHandler(event, row, col)}>
        <img
          src="https://via.placeholder.com/150?text=1-1"
          alt="Imagem 1-1"
        />
      </button>
    )
  },
  // ...
]

E aí ao remover vc manipula o array passando esse ID.