How to find clicked element in array of react elements?

JavaScript
1

I have on one side array of elements that will be rendered, and on other side click handler. So issue is in click handler function when i check indexOf(this) in array of elements, i get -1;

2

I donā€™t think you can call this.state.html.indexOf(this), because this is just your whole React component! So youā€™re asking if your React component is inside of the array, which is why you always get -1.

You might be able to create a new component for your black box (e.g. called BlackBox), and then construct your array using those instead.

Iā€™m just spitballing here, but your clickHandler might then pick up that ā€œthisā€ refers to the individual box (the smaller component) rather than the parent component.

I donā€™t know, thatā€™s what I would try next. Perhaps somebody else has a better idea.

1 Like
3

I would add an ā€˜idā€™ attribute to your div that is equal to i. Then when you click, the event.target.id would be your array index.

4

I think the event.target is actually null for some reason. The click event isnā€™t working properly.

5

i want to escape numeration

6 
...
        <div className="node" onClick={this.clickHandler.bind(this, i)}> </div>
     );
     return ({ html: arr });
  },
  
  clickHandler: function(i){
    
    console.log(i);
    
  },
...
1 Like
7
8

In React that are ways to handle all of the above without the use of jQuery, which I think is generally preferred.

In this case, the array of data could be generated in a similar way but rendered to the page using the map function, which would basically iterate through the array and allow you to specify what to render for each element. You could bind the index of the item to each rendered item in that way, and make it accessible using an onClick you attach as well.

For example if you have an array like this in your state:

var array = [1,2,3,4,5];

You could return in your render() function something like:

this.state.array.map(function(item, index) {

return <div className = "node" onClick = {this.handleClick.bind(this, index)}>{item}</div>

}

This should return 5 divs with content 1, 2, 3, 4, 5, and click handlers bound to each div. You would then need a handleClick() function in your component which would be triggered on the click of any of those divs and could just return its index, which would be passed into the function from the clicked div.

function handleClick(index) { console.log(index); }

I think that should point you in a helpful direction.

Btw Iā€™ve been using ES6 with React so my syntax *might be a little off above for ES5 but I think the ideas are correct at any rate! Good luck!

1 Like
9

i dont want to use numeration, i want to compare objects

10

Why? There are a couple of suggestions that would clearly work for what you want to accomplish.

11

If i have
node-1
node-2
node-3

and then user delete node-3

node-1
node-2

and then when user add another node i need to keep reference to number that is suffix to node so it can be easy with session or local storage, but i donā€™t want to lean on them, because if we have

node-1
node-2

and i set suffix to be length of array found in local storage

it will be:
node-1
node-2
node-2

12

I have no idea what you want accomplish but here you have it:

getInitialState: function(){
    this.realHTML = [];
    var arr = [];
    
    for ( let i = 0; i < 3; i ++ )
      arr.push(
      
         <div className="node" ref={(ref) => this.realHTML[i] = ref}>  "feaf " </div>
      
      );
    
    return ({ html: arr });
  },
  
  componentDidMount: function(){
    
    $(".node").on("click", function(event ){
      console.log("click");
      console.log("event: " + $(event.target));
      console.log("html content: " + this.state.html);
      console.log("index of event in html content: " + this.realHTML.indexOf(event.target));
      
    }.bind(this));
    
  },

indexOf is not -1 any more.

13

Something like this, but this doesnā€™t work:

14 
...
console.log("indexOf this in arr is: " + arr.toArray().indexOf(this));
...
15

hacked this indexOf by this:
code: 99 - 119 line

but below line 119. how i change properties like css and className, when i have just props of object from array. I heard props is immutable. how to jquery this?

**EDIT: just first click close to this pop up with tomato picutre, cause this lean on my elements below