OnClick event on React table row

Question

Hello first question and beginner React user here. I followed this (React - Triggering click event on table row ) example to have an onClick event on a React table but the first issue is I receive a warning in Visual Studio Code that Uncaught ReferenceError: e is not defined. Any help would be appreciated.

Here's my code:

import React from 'react';
import './gridStyle.css';

class Grid extends React.Component {

    onClickHandler = () => {
        const song = e.target.getAttribute('data-item');
        console.log('We need to get the details for ', song);
    }

    renderResultRows(data) {
        return data.map((coord, index) =>
            // anon func maintains scope!
            // Pass in a function to our onClick, and make it anon
            // to maintain scope.  The function body can be anything
            // which will be executed on click only.  Our song value
            // is maintained via a closure so it works.
            (
                // eslint-disable-next-line react/no-array-index-key
                <tr key={index} data-item={coord} onClick={this.onClickHandler}>
                    <td data-title="cc">{coord.lat},{coord.lon}</td>
                    <td data-title="ic" />
                    <td data-title="dlat" />
                    <td data-title="dlon" />
                </tr>
            )); // no need to bind with anon function
    }

    render() {
        console.log('Coords passed in from Accuracy Calculator :', this.props.coords);
       return (
            <div className="grid">
                <table id="table0">
                    {this.renderResultRows(this.props.coords)}
                </table>
            </div>
        );
    }
}

export default Grid;

score 1 · Answer 1 · answered Apr 08 '21 at 20:15

You need to put e in your function

In your onClickHandler, add e in the parameter.

onClickHandler = (e) => {
   const song = e.target.getAttribute('data-item');
   console.log('We need to get the details for ', song);
    
}

I hope it fixes your issue

score 0 · Answer 2 · answered Mar 01 '19 at 17:17

You did not pass the onClickHandler param as e, refer below code.


import React from 'react';
import './gridStyle.css';

class Grid extends React.Component {

    onClickHandler = (e) => {
        const song = e.target.getAttribute('data-item');
        console.log('We need to get the details for ', song);
    }

    renderResultRows(data) {
        return data.map((coord, index) =>
            // anon func maintains scope!
            // Pass in a function to our onClick, and make it anon
            // to maintain scope.  The function body can be anything
            // which will be executed on click only.  Our song value
            // is maintained via a closure so it works.
            (
                // eslint-disable-next-line react/no-array-index-key
                <tr key={index} data-item={coord} onClick={this.onClickHandler}>
                    <td data-title="cc">{coord.lat},{coord.lon}</td>
                    <td data-title="ic" />
                    <td data-title="dlat" />
                    <td data-title="dlon" />
                </tr>
            )); // no need to bind with anon function
    }

    render() {
        console.log('Coords passed in from Accuracy Calculator :', this.props.coords);
       return (
            <div className="grid">
                <table id="table0">
                    {this.renderResultRows(this.props.coords)}
                </table>
            </div>
        );
    }
}

export default Grid;

score 0 · Answer 3 · answered Mar 01 '19 at 17:18

You'll need to change...

  onClickHandler = () => {
    const song = e.target.getAttribute('data-item');
    console.log('We need to get the details for ', song);
}

To

onClickHandler = (e) => {
    const song = e.target.getAttribute('data-item');
    console.log('We need to get the details for ', song);
}

To prevent the error which you are getting. You can read more about the event object here.

score 0 · Answer 4 · answered Mar 01 '19 at 19:06

Since it's a click event, an event object is passed as an argument to the handler. Just define e (you can name it anything...e is just a convention) as an argument to be consumed in the function, so that you can access properties (like target) on it.

 onClickHandler = (e) => {
     const song = e.target.getAttribute('data-item');
     console.log('We need to get the details for ', song);
 }

Hope this helps !

OnClick event on React table row

4 Answers4