Auto trigger click event handler on last element of array map. Reactjs

Question

I am mapping an array in react render. There are multiple DOMs beings rendered.

And each DOM is bound with a click event handler. Which show some details on click.

I want to trigger an auto click on the last element of that array and pass that event to clickHandler.

{
    historyData.map((heading, index) => {
        return(
            <div className="history-node-container" key={index}>
              //This is where click handler is being called.
              <div className="history-node" onClick={(e) => {this.handleHistoryClick(e)}}>
                <span className="history-title">{heading.action}</span>
                <input type="hidden" value={heading.comment} className="comment-hidden" />
                <input type="hidden" value={heading.by} className="comment-by-hidden" />
                <input type="hidden" value={heading.role} className="comment-role-hidden" />
                <input type="hidden" value={heading.added_at} className="comment-added-hidden" />
                <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
              </div>
            </div>
        )
    })
}

And clickHandler Code is:

handleHistoryClick(event){
      event.stopPropagation();
      //Some Code To Display Information Using "event"
}

Now I want to do is if in mapping The element is last one I want to trigger auto click and display it's information accordingly.

How would I achieve that?

Check this https://stackoverflow.com/questions/42550341/react-trigger-onchange-if-input-value-is-changing-by-state/42554283#42554283 — Shubham Khatri, Oct 24 '17 at 07:10
@ShubhamKhatri, my question is too different from that one you have mentioned. — Noman Ali, Oct 24 '17 at 07:12
you problem is to get reference to the last element. Why can't you add a ref to all of them, in your case ref will be an array and just access the last one. and to trigger an event on it you can refer the above question — Shubham Khatri, Oct 24 '17 at 07:17

score 1 · Answer 1 · answered Oct 24 '17 at 07:12

1

The map function has a third argument which is the original array on which map was called. You can use that to determine if this is the last one.

{
historyData.map((heading, index, array) => {
  if(index===array.length-1){
    //do something
  }
  return(...)

answered Oct 24 '17 at 07:12

anand

565
2
9

Finding out last element and auto triggering event for that element. What about auto trigger? – Noman Ali Oct 24 '17 at 07:13
I was wondering what you want to do inside the event handler. In particular, if you don't need to use the callback argument 'event', you can just call it directly within the if block. or use what hannad-rehman has suggested. Also, are you expecting further user clicks on the last element, after it is auto-triggered – anand Oct 24 '17 at 07:22

score 0 · Answer 2 · answered Oct 24 '17 at 07:19

this may not be the best answer but it will do the trick

 {
        historyData.map((heading, index,originalArr) => {
            return(
                <div className="history-node-container" key={index}>
                  //This is where click handler is being called.
                  <div className="history-node" onClick={ (index==originalArr.length-1)?this.handleHistoryClick(e) : (e) => {this.handleHistoryClick(e)}}>
                    <span className="history-title">{heading.action}</span>
                    <input type="hidden" value={heading.comment} className="comment-hidden" />
                    <input type="hidden" value={heading.by} className="comment-by-hidden" />
                    <input type="hidden" value={heading.role} className="comment-role-hidden" />
                    <input type="hidden" value={heading.added_at} className="comment-added-hidden" />
                    <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
                  </div>
                </div>
            )
        })
    }

this does the trick. you want to check if the current itration is the last iteration. if its the last itration. directly call the function.

onClick={ (index==originalArr.length-1) ? this.handleHistoryClick(e) : (e) => {this.handleHistoryClick(e)}}

score 0 · Answer 3 · answered Oct 24 '17 at 07:30

add array in your map arguments:

historyData.map(heading, index, array)

and in your onClick add a condition:

onClick={
 (e) => {
    (index==array.length-1) ? 
       (this.handleHistoryClick(e, true)) : 
       (this.handleHistoryClick(e, false))
  }
}

and in your handler function add a condition too:

handleHistoryClick(event, isLastElement){
      event.stopPropagation();
      if(isLastElement){
         // do somthing
      }else{
         // do somthing else
      }
}

score 0 · Answer 4 · answered Oct 24 '17 at 07:42

One should never do anything other than rendering in the render method, especially stuff like event triggers. render has to be pure.

Said that, what could be done is...

first store a ref to the last element in a variable.
trigger the click event in componentDidMount.

Sample code -

{
    historyData.map((heading, index) => {
        return(
            <div className="history-node-container" key={index}>
              // store every item in `this.lastOne`, it will point to the
              // last item at the end of `map` call.
              <div className="history-node" ref={item => this.lastOne = item} onClick={(e) => {this.handleHistoryClick(e)}}>
                <span className="history-title">{heading.action}</span>
                <input type="hidden" value={heading.comment} className="comment-hidden" />
                <input type="hidden" value={heading.by} className="comment-by-hidden" />
                <input type="hidden" value={heading.role} className="comment-role-hidden" />
                <input type="hidden" value={heading.added_at} className="comment-added-hidden" />
                <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
              </div>
            </div>
        )
    })
}

And then in componentDidMount -

componentDidMount(){
    if (this.lastOne) {
        this.lastOne.click();
    }
}

If you want to execute the click handler on subsequent updates to the component, put similar code in componentDidUpdate.

Auto trigger click event handler on last element of array map. Reactjs

4 Answers4