how to access from app component to my react reusable table cell data

Question

I've created a table component so I can reuse it in different part on my project, as I need it to be more flexible and also for a better practic for on how to do that My Goal: Inside my Friends component I'm trying to capture on what cell the use clicked.

Friends component

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData} />
      </div>
    )
}

export default Friends;

Table Component

import React from 'react'
import TableHeaderItem from './tableHead'
import TableRow from './tableRow'

const Table = ({theadData, tbodyData}) => {
  

  return (
    <table>
      <thead>
        <tr>
          {
            theadData.map(headerTitle => {
             return <TableHeaderItem
                      key={headerTitle}
                      item={headerTitle} />
            })
          }
        </tr>
      </thead>
      <tbody>
          {
              tbodyData.map(row => {
                console.log("rowID", row.id)
                return <TableRow
                        onRowClicked={() => console.log('user clicked on row #', row.id)}
                        key={row.id}
                        rowData={row.items} />
              })
          }

      </tbody>
    </table>
  )
}

export default Table

TableRow component

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked, onCellClick}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={()=>console.log('user cliecked on cell name',cell)}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

TabelCell component

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;

Answer 1

Friends component

const Friends = () => {


    // My goal is to get the the information about the clickedcell here


    const theadData = ["Name", "Email", "Date"];

    const tbodyData = [
        {
            id: "1",
            items: ["Peter", "peter@email.com", "01/01/2021"],
        },
        {
            id: "2",
            items: ["Foo", "foo@email.com", "12/24/2020"],
        },
        {
            id: "3",
            items: ["bar", "bar@email.com", "12/01/2020"],
        },
    ];

    const onFriendClicked = (e) => {
        console.log(e.target);
    }
    return(
      <div>
        <Table theadData={theadData}
          tbodyData={tbodyData}
          onTableClicked={onFriendClicked}
        />
      </div>
    )
}

export default Friends;

Table Component

import React from 'react'
import TableHeaderItem from './tableHead'
import TableRow from './tableRow'

const Table = ({theadData, tbodyData, onTableClicked}) => {
  

  return (
    <table>
      <thead>
        <tr>
          {
            theadData.map(headerTitle => {
             return <TableHeaderItem
                      key={headerTitle}
                      item={headerTitle} />
            })
          }
        </tr>
      </thead>
      <tbody>
          {
              tbodyData.map(row => {
                console.log("rowID", row.id)
                return <TableRow
                        onRowClicked={onTableClicked}
                        key={row.id}
                        rowData={row.items} />
              })
          }

      </tbody>
    </table>
  )
}

export default Table

TableRow component

import TableCell from './tableCell'


const TableRow = ({ rowData, onRowClicked}) => {

  return(
      <tr
        onClick={onRowClicked} >
        {
          
          rowData.map(cell => {
            return (
              <TableCell
                key={cell}
                cellData={cell}

                onCellClicked={onRowClicked}
          
                />)})
        }
      </tr>
  )
}

export default TableRow;

TabelCell component

const TableCell = ({   cellData, onCellClicked}) => {

  return (
      <td
        onClick={onCellClicked}>{cellData}</td>
  )
}

export default TableCell;