React - click data on table returns wrong index of row and column

Question

I am writing a simple datatable using react. After clicking a table cell, i need function to know exact row index and column index of it. In my case, i have a 3x3 table, with indexing from 0 - 2.

function getTable(){
    let rowIndex = 0;

    this.tableData.forEach(row => {
      const rowValues = Object.values(row);
      let colIndex = 0;

        let rowData = [];
        rowValues.forEach(colVal => {
          rowData.push(
            <td key={colIndex} onClick={() => this.enableEdit(rowIndex, colIndex)}>
              {colVal}
            </td>
          );
          console.log("row: " + rowIndex + ", column: " + colIndex);
          colIndex++;
        });

        bodyRows.push(<tr key={rowIndex}>{rowData}</tr>);

      rowIndex++;
    });

      return (
      <table className="table table-dark">
        <thead>
          <tr>{headColumns}</tr>
        </thead>
        <tbody>{bodyRows}</tbody>
      </table>
    );

}

    enableEdit(row, col){
       console.log(row, col);
    }

Console log, does everything right. My results of it go like:

row: 0, column: 0
row: 0, column: 1
row: 0, column: 2
row: 1, column: 0,
row: 1, column: 1,
row: 1, column: 2
...

Keys work well too, they are all unique as intended:

But, enableEdit() function returns 3, 3 after clicking any cell (I guess its 3 because, that's the same value I get if i console.log after loops) , and that's my problem.

So what am I doing wrong? Why I don't get my expected results?

When you are iterating using `forEach` you are increasing your col and row index for every iteration. So the value `3,3` is expected. You probably should move your `bodyRows` to local react state in which each cell will have its own row and col index. Currently your `this.enableEdit(rowIndex, colIndex)` sends overwritten values of indices. — Utsav Patel, Mar 23 '19 at 14:06
@UtsavPatel Sorry, i don't seem to understand. Why are keys unique and console log right, but onClick's parameters are of post-iteration? https://stackoverflow.com/questions/40044861/get-key-index-on-click-es6-react Judging by this link, they are doing something similar and successfully, am i right? he is using some arbitrary value of index for key as well as for onClick argument. — Nick, Mar 23 '19 at 14:13
You have defined your `rowIndex` and `colIndex` outside the `forEach` respectively and in each iteration you are increasing them by 1. So in your function `enableEdit` `rowIndex` and `colIndex` are both passed as 3. The console logs show correct value because they were printed during the iteration and same goes for keys. — Utsav Patel, Mar 23 '19 at 14:31
@UtsavPatel Oh, now i got it. onClick event isn't attached to it on every iteration right? — Nick, Mar 23 '19 at 14:33
@UtsavPatel thanks, i think i understood. What do you think would be best way for me to get cell row/col indices? — Nick, Mar 23 '19 at 14:36
@UtsavPatel nevermind i got it. I will post an answer but credit you so much — Nick, Mar 23 '19 at 14:38

score 1 · Answer 1 · answered Mar 23 '19 at 14:41

UtsavPatel helped me much to understand what happened. After ForEach iteration rowIndex and colIndex values are 3, 3. We can even see that if we console.log after loop.

So what i did is just create a new object and store data that won't be touched there, like this:

    rowValues.forEach(colVal => {
      const indexDat = { rowIndex, colIndex };
      rowData.push(
        <td key={colIndex} onClick={() => this.enableEdit(indexDat)}>
          {colVal}
        </td>
      );
      console.log("row: " + rowIndex + ", column: " + colIndex);
      colIndex++;
    });

React - click data on table returns wrong index of row and column

1 Answers1