React, getting index of list when clicked

Question

I'm trying to follow the examples that are coming up here on Stack Overflow and I can't get it to work. It works just fine if I remove everything that says "index" though. It passes in the "page" just fine. Can someone point me in the correct decision please thank you.

My Click function

handleOnClick(page, index) {
    console.log(page);  //page is correct
    console.log(index); //undefined

}

My Render

let self = this;

    playlistList[pos].list.map(function(page, index)

    {if (page.selected) {
      return (
        <tr key={page.id} onClick={() => self.handleOnClick(page, index)}>
          <td>{page.name}</td>
          <td>{page.subComposition.name}</td>
        </tr>
      );}
    }

@Ju66ernaut which parameters. I reversed the handeClick parameters it doesn't work neither — user1189352
– user1189352, Commented Mar 17, 2017 at 20:56
@Ju66ernaut no matter how I order the parameters one of them is still undefined. Im just having trouble passing the index — user1189352
– user1189352, Commented Mar 17, 2017 at 20:59
can you reproduce the issue here: jsfiddle.net/zz0o2v0q/2, I tried to repro it based on the code snippets you've provided but I'm not seeing the same behavior — erikamjoh
– erikamjoh, Commented Mar 17, 2017 at 21:09

Mike Hughes III · Accepted Answer · 2017-03-17 21:06:57Z

2

You're probably better off making a component that handles creating the tr. Then creating the function in that component, then running the function using the props passed down.

Unless you're going to need to change the state, then pass the function down to the component to be used.

answered Mar 17, 2017 at 21:06

Mike Hughes III

463 bronze badges

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

Comments

A. Horst · Accepted Answer · 2017-03-18 05:02:17Z

2

You have to pass the parameters name in the arrow function parentesis, and it's value through the function parentesis.

Like:

onClick={(page, index) => self.handleOnClick(page, index)}

edited Mar 18, 2017 at 5:02

answered Mar 17, 2017 at 22:29

A. Horst

888 bronze badges

Comments

hamed hossani · Accepted Answer · 2019-01-16 19:14:17Z

1

Are you sure that your function handleOnClick it's correct? I think the parameters are wrong.

When you call the function you pass handleOnClick(page, index), and in the method the parameters are handleOnClick(index, page)

edited Jan 16, 2019 at 19:14

hamed hossani

1,0022 gold badges16 silver badges34 bronze badges

answered Mar 17, 2017 at 21:03

A. Horst

888 bronze badges

1 Comment

user1189352 Over a year ago

they should be the same now. I tried reversing and as well just trying to see what comes out of it but still the index is undefined

Collectives™ on Stack Overflow

React, getting index of list when clicked

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related