Passing event object in onClick function in React

Question

I have a React app in which upon clicking on a column heading, the table sorts the data (via a merge sort).

I want to pass the data (i.e., an array of objects) and the event object. I want to use the event object to get the value of the column clicked, so to then use it to sort the data.

However, I keep getting an error message that the event object is undefined.

Below is the relevant portion of the code:

  sortColumn (siteArr, evt) {
    if (siteArr.length < 2) {
      return siteArr;
    } else {
      const column = evt.target.value; // evt returns undefined
      const midPoint = Math.round(siteArr.length / 2);
      const subLeft = this.sortColumn(siteArr.slice(0, midPoint));
      const subRight = this.sortColumn(siteArr.slice(midPoint));
      return this.merge(column, subLeft, subRight); 
    }
  }
  merge (column, left, right) {
    const out = [];
    while (left.length && right.length) {
      out.push(left[0][column] <= right[0][column] ? left.shift() : right.shift());
    }
    while (left.length) {
      out.push(left.shift());
    }
    while (right.length) {
      out.push(right.shift());
    }
    this.setState({sites: out});
    return out;
  }
  render () {
    const siteArr = this.state.sites;
    const sites = this.state.sites.map((site) => {
      return (
          <Site site={site} key={site.id} /> 
        );
    });
    const site_number = sites.length;
    return (
        <div>
          <table>
            <thead>
              <tr>
                <th><a onClick={(evt) => this.sortColumn(siteArr, evt)}>Name</a></th>
                <th><a onClick={(evt) => this.sortColumn(siteArr, evt)}>City</a></th>
                <th><a onClick={(evt) => this.sortColumn(siteArr, evt)}>State</a></th>
              </tr>
            </thead>
            <tbody>
              {sites}
            </tbody>
          </table>
        </div>
    );
  }

a) How do I pass the event object to the sortColumn function?

b) How do I access the column value via the event object?

Thanks for any help you can provide!

What are you expecting event.target.value to equal? The inner text value like Name or City ? — azium
– azium, Commented Aug 14, 2016 at 18:34
Well that's not what event.target.value gives you, but it doesn't look like you would need it here because you already have the text value right next to it. why not just () => this.sortColumn(siteArr, 'Name')? — azium
– azium, Commented Aug 14, 2016 at 19:25
That totally works -- thanks, azium. I guess I'm just not sure how I would access that information from the event object. I figure there must be a way. — Adam White
– Adam White, Commented Aug 15, 2016 at 17:07

azium · Accepted Answer · 2016-08-15 18:12:46Z

2

For your situation because you already know what the text value is, just pass that to your function:

() => this.sortColumn(site‌Arr, 'Name')

However if you want to get the innerText value of the target, that's what you use:

event => this.sortColumn(siteArr, event.target.innerText)

answered Aug 15, 2016 at 18:12

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing event object in onClick function in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related