title: How to prevent one event handler to trigger all events
body: <p>i have event handler on multiple <code>map</code>ed div elements. when event is triggered it triggers on all <code>map</code>ed elements. I want that event to trigger only on clicked/selected element</p>
  
  <pre><code>    class App extends Component {
     constructor (props) {
  super(props)
  
  
  this.state = {
    edit: false,
    div: true,
  }
   }
  
   componentDidMount(){
  
   this.props.getPortData()
   }
   handleDoubleClick = (event, index, cargo) =&gt; {
  
  const name = event.currentTarget.getAttribute('data-tag');
  console.log(name, 'data tag value')
  console.log(index, 'index')
  console.log(event.target, 'event.target')
  console.log(event.currentTarget, 'event.currentTarget')
  const myIndex = cargo.id;
  console.log(myIndex, 'my index')
  // const test = cargo.index
  console.log(cargo, 'mapedCargo')
  if( myIndex === (index+356) ) {
  
   this.setState({
  edit: true,
  div: false,
   }  )
  } 
  
  
  
   }
    render() {
   let dataReceived;
   const styleDiv = this.state.edit ? {display: 'none'} :{};  
   const styleInput = this.state.div ? {display: 'none'} :{display: 'block'};  
   // console.log(this.props, "item");
   if(this.props.Item.loading) {
     dataReceived = (&lt;div  className="loading-relative"&gt;&lt;div&gt;&lt;h1 className="loading"&gt;Loading&lt;/h1&gt;&lt;/div&gt;&lt;div className="lds-css ng-scope"&gt;&lt;div className="lds-double-ring"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;);
  }else {
   const shiped = this.props.Item.data.ships;
   const cargo = this.props.Item.data.dock.cargoItems;
  // console.log(shiped, "ship")
  // console.log(cargo.index, "dock")
  
      const mapedShips = shiped.map(vasia =&gt; (
        &lt;div key={vasia+vasia.id}&gt;
            &lt;div className="ships"&gt;
              &lt;div className="value"&gt;
              &lt;div  className="name" key={vasia.name}&gt;Name: {vasia.name}&lt;/div&gt;
              &lt;div className="name" key={vasia.id}&gt;Id: {vasia.id}&lt;/div&gt;            
          &lt;/div&gt;
            &lt;div className="value"&gt;
          &lt;div className="name" key={vasia.maxWeight}&gt;Max Weight: {vasia.maxWeight}&lt;/div&gt;
          &lt;div className="name" key={vasia.maxVolume}&gt;Max Volume: {vasia.maxVolume}&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
      ))
      const mapedCargo = cargo.map((cargo, index) =&gt; (
        &lt;div key={cargo+cargo.id}&gt;
          &lt;div className="cargo"&gt;
              &lt;div className="value"&gt;
          &lt;div className="name" key={cargo.id} ref={cargo.id} data-tag={cargo.id} style={styleDiv} onDoubleClick={(event) =&gt; {this.handleDoubleClick(event, index, cargo)}}&gt;Cargo Id: {cargo.id}&lt;/div&gt; 
            &lt;div style={styleInput}&gt;Cargo Id:
              &lt;input id="test" type="text" defaultValue={cargo.id} /&gt;
            &lt;/div&gt;
  
          &lt;div className="name" key={cargo.weight}&gt;Cargo weight: {cargo.weight}&lt;/div&gt;
          &lt;div className="name" key={cargo.volume}&gt;Cargo volume: {cargo.volume}&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
      ))
  
  
  
  dataReceived = 
  &lt;div className="all"&gt;
  &lt;div className="testing"&gt;
    {/* &lt;div className="ships"&gt; */}
    {mapedShips}
    &lt;/div&gt;
     &lt;div className="testing"&gt; 
    {mapedCargo}
    &lt;/div&gt; 
  &lt;/div&gt;
   };
  
    return (
     &lt;div className="App"&gt;
      {dataReceived}
     &lt;/div&gt;
   );
  }
  
  
   }
  </code></pre>
  
  <p>i know my code is a mess as i tried mulptiple solutions to make it work
  <a href="https://i.stack.imgur.com/JAZGa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JAZGa.png" alt="enter image description here"></a></p>