javascript - Show a pop-up window with information coming from an element and its totals, from one of the table in react.js

Question

I'm developing an application in React.Js.

I have the array:

array = [
  {
    "id": 1,
    "date": {
      "id": 1,
      "name": "202001"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "price": 100
    },
    {
    "id": 2,
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "price": 200
  },
  {
    "id": 3,
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 2,
      "name": "I2"
    },
    "price": 300
  },
]

And I show the data as shown in the table:

ITEM	202001	202002	TOTAL
I1	100	200	300
I2	-	300	300
TOTAL	100	500	600

Answer 1

You can pass the total data to the onClickEventHandler like this,

    <tr onClick={(event) => yourHandler(event, item, sumPerItem[item])}>
      <td>{item}</td>
      {dates.map((date) => <td>{items_dicc[item][date] || ''}</td>)}
      <td>{sumPerItem[item]}</td>
    </tr>

The event handler should be written like this,

yourHandler = (event, currentItem, totalForRow) => {
    // You update the state here 
}

This method is for whole row. If you want to show different data on each cell click you need to add the eventHandler on elements and update the method parameters according to your need.