How to get information from the hierarchical level on click?

Question

React

There is a hierarchical data structure Container-Row-Cell. At the Container and Row levels, there are only indexes. Practically significant data is at the Cell level. The data is supplied in JSON format and has the following structure:

[{ pillar: № стеллажа, 
   data: [ { shelf: № полки, 
             data: [ { seat: № места, 
                       data: { busy: false/true, 
                               size: 1/2; 
                               status: "string"; 
                               model: "string"
                              } 
                     },...
                   ]
           },... 
         ]
 },...
]

To display the hierarchy, I create three React components:

class PillarListItem extends Component {

      render () {
        const {pillar, showMachine} = this.props;

        return (
            <div className="machines-pillar">
              <table className="pillar">
                <caption>
                  Стеллаж {pillar.pillar}
                </caption>
                <tbody>
      	        {
      	          pillar.data.map((s , index) => {
      	            return <ShelfListItem
                      key = {s.shelf}
      	              shelf={s}
      	              showShelfMachine = {() => showMachine(s)}
      	            />
      	          })
      	        }
                </tbody>
              </table>
            </div>
        )
      }
    }

    class ShelfListItem extends Component {

      render () {
        const {shelf, showShelfMachine} = this.props;

        return (
        	<tr>
    	        {
    	          shelf.data.map((m , index) => {
    	            return <PlaceListItem
                    key = {m.seat}
    	              seat={m}
    	              showPlaceMachine = {() => showShelfMachine(m)}
    	            />
    	          })
    	        }
    	    </tr>
        )
      }
    }

    class PlaceListItem extends Component {

      render () {
        const {seat, showPlaceMachine} = this.props;

        if (seat.data.busy) {
          return (
            <td className={seat.data.status} colSpan={seat.data.size} onClick={showPlaceMachine}>{seat.data.id}</td>
          )
        } else {
          return (
            <td className={seat.data.status} colSpan={seat.data.size}>{seat.data.model}</td>
          )
        }
      }
    }

I arrange the display of the hierarchical structure with the following call:

class Pillars extends Component {

  constructor (props) {
    super(props);
    this.state = {
      setterMachines: gon.setterMachines,
      selectedMachine: null
    }
  }

  showPillarHandler = (machine) => {
    this.setState({
      selectedMachine: machine.data
    })
  }

  tooglePopup = () => {
    this.setState({
      selectedMachine: null
    })
  }

  render () {
    const {selectedMachine, setterMachines} = this.state;

    return (
      <div className="container-machines">           
        {
          setterMachines.map((p,index) => {
            return <PillarListItem
              key = {p.pillar}
              pillar={p}
              showMachine = {() => this.showPillarHandler(p.data[1].data[1])}
            />
          })
        }
        
        {selectedMachine &&
          <MachineShow toogle={this.tooglePopup} machine={selectedMachine}/>
        }
      </div>
    )
  }
}

The task is to obtain a decryption from the Cell level when clicking on it.
Problem. How to programmatically get the Row and Cell indices for the line of code
this.showPillarHandler(p.data[Row index].data[Cell index]) ?

Answer 1

How to programmatically get the Row and Cell indices for the line of code
And it is not necessary to receive any indexes. Pass the desired object to the handler in the lowest component of your hierarchy.
In the Pillars component, do this: showMachine={this.showPillarHandler}.
In PillarListItem like this: showShelfMachine={showMachine}.
And in ShelfListItem similarly: showPlaceMachine={showShelfMachine}.
Finally, in PlaceListItem: onClick={() => showPlaceMachine(seat)}.
PS Google what redux is.