Passing only clicked element to onClick function - reactjs

Question

I have multiple elements with same className and i want if some element (with className history-node) is clicked it should get className active along with current className.

But i am having an issue, there are childs of that element and if child elements gets clicked they also get class Active.

Here is the code:

<div className="history-node-container" key={index}>
  <div className="history-node" onClick={(e) => {this.handleHistoryClick(e.target)}}>
    <span className="history-title">{heading.action}</span>
    <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
  </div>
</div>

handleHistoryClick function

handleHistoryClick(target){
  $('.history-node').removeClass('active'); //removing active class from all elements
  target.className = 'history-node active';
}

I want to run function when user click on element with className history-node

But if user clicks on history-title, ClickHandler gives class active to history-title element.

EXPECTED BEHAVIOUR: if history-node is clicked only history-node should get class active.

Chuck Wilbur · Accepted Answer · 2024-03-07 13:16:33Z

5

One tip and how to solve your problem (In two ways)

Tip: Not usually the best idea to mix React with jQuery. React came in as a major paradigm shift in how we interact with the DOM. Try to read a little bit more about React, how it works, why is it so different from simply adding/removing elements in the DOM with jQ.

Some references to help you with that:

How to go from jQuery to React.js?

Thinking in React for jQuery Programmers

Now, back to your question

You should use currentTarget.

As the .history-title and .history-date elements are wrapped within .history-node, any click on them will trigger it's parent's event, since .history-node body is .history-title + .history-date. That's the correct behavior. When you trigger an event in JS, the event object receives two parameters: target, which is the event triggering the event and currentTarget, the element that is actually listening for the event.

Now for the code:

with JQ

Component:

<div className="history-node-container" key={index}>
  <div className="history-node" onClick={handleHistoryClick}>
    <span className="history-title">{heading.action}</span>
    <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
  </div>
</div>

Click:

handleHistoryClick(event){
  $('.history-node').removeClass('active')
  event.currentTarget.classList.add('active')
}

The React way (Pure React, no modules)

Component:

class HistoryNode extends Component {
    constructor(props) {
        super(props)
        this.state = { isActive: false }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(e) {
      let state = this.state
      this.setState({isActive: !state.isActive})
    }

    render() {
      return(
        <div className="history-node-container">
          <div className={`history-node ${this.state.isActive ? 'active' : ''}`} onClick={this.handleClick}>
            <span className="history-title">{heading.action}</span>
            <span className="history-date">
               {moment(heading.added_at).format("MMMM Do, YYYY")}</span>
          </div>
        </div>
      )
    }
}

Notice how you don't need to manipulate the DOM at any moment at the React solution. You just attach your event to that particular component, define how it's state change should reflect on the UI and let React do the rest.

Hope it helps ;)

Reference for target vs currentTarget

edited Mar 7, 2024 at 13:16

Chuck Wilbur

2,6303 gold badges27 silver badges37 bronze badges

answered Oct 20, 2017 at 13:06

Alexandre Wiechers Vaz

1,6073 gold badges19 silver badges21 bronze badges

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

2 Comments

Noman Ali Over a year ago

Great explanation though. Thanks a lot for your time and effort. I got it working.

Chuck Wilbur Over a year ago

Two comments: * In the line <div className={history-node ${this.state.isActive ? 'active' : ''}} onClick={handleHistoryClick}>, it should be onClick={this.handleClick} (I submitted an edit) * If you declare handleClick as handleClick = () => {... then you won't need this.handleClick = this.handleClick.bind(this) in the constructor

3Dos · Accepted Answer · 2017-10-20 12:46:29Z

1

I think the event propagates to child components.

Have you tried this ?

<div className="history-node-container" key={index}>
  <div className="history-node" onClick={handleHistoryClick}>
    <span className="history-title">{heading.action}</span>
    <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
  </div>
</div>

HandleClick function

handleHistoryClick(event){
  event.stopPropagation();
  $('.history-node').removeClass('active');
  event.target.className = 'history-node active';
}

EDIT : You could make it simpler though (and without jQuery) using your component state. But without knowing how you wrote your component I cannot give you a snippet illustrating it. Be careful too as you interact directly with the DOM, this implies a performance loss. Using the React state allows you to avoid such thing!

edited Oct 20, 2017 at 12:46

answered Oct 20, 2017 at 12:34

3Dos

3,5474 gold badges26 silver badges40 bronze badges

1 Comment

3Dos Over a year ago

Could you edit your original post with the entire component ?

Collectives™ on Stack Overflow

Passing only clicked element to onClick function - reactjs

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related