How make table row clickable?

Question

import React from 'react'
import './myform.css'

const Emp=()=>{
 const players=[
        {
            id: 1,
            fullName: 'Employee 1',
            email:'example1@mail.com',
            joiningdate: '05/08/2020',
            
        },
        {
            id: 2,
            fullName: 'Employee 2',
            email:'example2@mail.com',
         },
        {
            id: 3,
            fullName: 'Employee 3',
            email:'example3@mail.com',
            joiningdate: '10/08/2020'
        },
        {
            id: 4,
            fullName: 'Employee 4',
            email:'example4@mail.com',
            joiningdate: '05/08/2020'
        },

    ]

/* I want to make row clickable and when it clicked information 
from whole row is display on other page
I trying so much to make row clickable but it fails, 
I got error "rowSelect() is undefined!!!" */

    rowSelect=(event)=>{
      console.log(event);
    }    
     
    const renderPlayer=(player, index)=>{            
            return(                
                <tr key={index} onClick={this.rowSelect}>
                    <td>{player.id}</td>
                    <td>{player.fullName}</td>
                    <td>{player.email}</td>
                    <td>{player.joiningdate}</td>
                </tr>
            )
        }        
    
    > //return data into table format on UI
    
        return(
            <div className='emp'>
                <table className='border'>
                    <thead>
                        <tr >
                            <th>Id</th>
                            <th>Full Name</th>
                            <th>Email</th>
                            <th>Joining Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {players.map(renderPlayer)}
                    </tbody>
                </table>
            </div>
        )
    }    
    export default Emp

Answer 1

Since this is a functional component you need to declare your function as

function rowSelect(event) {
}

or

const rowSelect = event => {
}

then call it in your onClick like this

<tr key={index} onClick={rowSelect}>