Add class without state in React?

Question

I have a React app with a table (with a variable number of rows). I want to be able to click a link or button in one cell of the table to add a class to the parent of that link/button.

Here's an example row in the table:

<tr>
  <td>Sample</td>
  <td className="num">40%</td>
  <td><a>Accept</a></td>
</tr>

When I click "Accept", I want num (or the whole tr, if that's easier) to have a new class added. How can I do this? Because I have a variable number of rows I want to avoid using state.

dfsq · Accepted Answer · 2017-04-08 08:56:22Z

4

You could delegate click event to the table, this way you will have only one event handler for entire table:

<table onClick={this.onClick}>

Then have something like this for onClick method:

onClick(e) {
  if (e.target.tagName === 'A') {
    const tr = e.target.parentNode.parentNode
    tr.classList.toggle('selected')
  }
}

answered Apr 8, 2017 at 8:56

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

Add class without state 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