Getting Index of onClick target with ReactJs

Question

I have code at the following url: https://gist.github.com/motleydev/6d5e980e4d90cc5d52fd where I am constructing a tab type setup. There's a row of tabs, a section of content and then another row of images with an alternating active state depending on which tab is "open." What I ultimately need to do is be able to get the index of the tab clicked but I can't seem to figure out a good way to do that. All I need is just the integer. Appreciate any insight. Thanks!

Make another component called Tab and send the Container onClick event as a property as well as the index. Then you can invoke onClick on the actual tab where you call the Container's onClick with the correct index. Its dirty, but I think it will work. — magnudae
– magnudae, Commented Mar 19, 2015 at 11:05
I believe the answer is to store the index on the HTML element, and retrieve with e.target or e.currentTarget, not to bind the function every time the map happens — neaumusic
– neaumusic, Commented Feb 16, 2017 at 19:42

jdlm · Accepted Answer · 2015-03-19 12:35:07Z

8

I'm not able to test this currently, but something along the lines of this. Basically send a callback and an index to each individual tab. When a tab is clicked, execute the callback with the index as parameter:

var Tab = React.createClass({
  handleClick: function (event) {
    event.preventDefault();
    this.props.tabClicked(this.props.index);
  },
  render: function () {
    return (
      <li>
        <a href="#" onClick={this.handleClick}>Tab {this.props.index}</a>
      </li>
    );
  }
});

var Tabs = React.createClass({
  handleClick: function (index) {
    console.log('Tab #' + index);
  },
  render: function(){
    var self = this;
    var tabs = this.props.tabs.map(function (tab, index) {
      return (
        <Tab key={index} index={index} tabClicked={this.handleClick} />
      )
    });

    return (
      <nav>
        <ul>
          {tabs}
        </ul>
      </nav>
    );
  }
});

answered Mar 19, 2015 at 12:35

jdlm

6,7545 gold badges34 silver badges50 bronze badges

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

2 Comments

neaumusic Over a year ago

This is the answer, store the data on the element

Partha Pal Over a year ago

This is the correct answer. Also you can create a wrapper to capture the event and pass it to parent along with data element. You can check this fiddle jsfiddle.net/parthapal33/cydubbxh

Black · Accepted Answer · 2018-03-30 05:59:12Z

It is possible to it do without creating a new component by using getAttribute() function of event.target and adding index as a custom attribute

  var Tabs = React.createClass({
    handleClick: function(event){
      event.preventDefault();
      console.log(event.target.getAttribute('index');
    },

    render: function(){
      var self = this;
      var tabs = this.props.tabs.map(function(tab,index){
        var clickHandler = self.handleClick;
        return (<li key={'tab'+index}><a ref={'tab'+index} index={index} href="#" onClick={clickHandler} > {tab.meta.title}</a></li>)
      });
      return (
        <nav>
          <ul>
            {tabs}
          </ul>
        </nav>
        )
    }
  });

You can find more information about event.target.getAttribute() at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes#JavaScript_Access

Sebastien Lorber · Accepted Answer · 2015-03-19 13:10:58Z

-1

Jorum solution works.

You can also replace:

    handleClick: function(event){
      event.preventDefault();
      console.log(this);
    },
    render: function(){
      var self = this;
      var tabs = this.props.tabs.map(function(tab,index){
        var clickHandler = self.handleClick;
        return (<li key={'tab'+index}><a ref={'tab'+index} href="#" onClick={clickHandler} > {tab.meta.title}</a></li>)
      });
      return (
        <nav>
          <ul>
            {tabs}
          </ul>
        </nav>
        )
    }
  });

By:

    handleClick: function(index){
      event.preventDefault();
      console.log(this);
    },
    render: function(){
      var self = this;
      var tabs = this.props.tabs.map(function(tab,index){
        var clickHandler = self.handleClick.bind(null,index);
        return (<li key={'tab'+index}><a ref={'tab'+index} href="#" onClick={clickHandler} > {tab.meta.title}</a></li>)
      });
      return (
        <nav>
          <ul>
            {tabs}
          </ul>
        </nav>
        )
    }
  });

answered Mar 19, 2015 at 13:10

Sebastien Lorber

92.6k76 gold badges302 silver badges430 bronze badges

3 Comments

motleydev Over a year ago

so, I'm going to give you the credit because it's a functioning solution with less code, though I appreciate Jorums solution too. I was trying a "flavor" of this solution first but each time I tried passing "this" into the first param of the bind instead of the null object and it kept saying "react's doing that for you, stop doing it yourself" or something in that vein. why does it work with null object and does the event just get passed regardless?

Sebastien Lorber Over a year ago

I had this problem too. This is because React does not want you to change the context of the method call (even if you bind to the already binded component which is a bit weird), and only binding with null does not change the context. Alternatively you can use _.partial from underscore/lodash

eponymous23 Over a year ago

I'm trying this approach and the index passes down fine.However, "this" in my click handler is now null and I need to be able to set state in the click handler via the usual means --> this.setState({...}) because "this" is null.

Collectives™ on Stack Overflow

Getting Index of onClick target with ReactJs

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related