title: React : How to display a modal popup only for that specific div
body: <p>To make it more clear , basically what I'm trying to do is like Amazon </p>
  
  <p>There will be a bunch of products and once you click on the product ,Only that product and its details will be displayed on the Popup Modal.</p>
  
  <p>In my case , I have stored 3 data in an Array, I have mapped it out Which creates 3div and 3Modal Popup with buttons in each.</p>
  
  <p>Once I click on the button of 1st div , I want the modal to be open for that first div only.</p>
  
  <p>But right now when I click on the button all 3 Modal Popup.</p>
  
  <p>I'm new to React , I can do this same thing in JQuery and Javascript, But I'm not able to achieve this in React.</p>
  
  <p>Or is there a better approach to this ? Like rather than looping and creating 3modal popup Can we create just one modal popup, That will display the data of the particular div of which button is being clicked?</p>
  
  <p>My Current Code:</p>
  
  <p>App.js , Where i have created the Array</p>
  
  <p><a href="https://i.stack.imgur.com/ils7s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ils7s.png" alt="enter image description here"></a></p>
  
  <p>Product.Js Where its being mapped out into 3div and also has the modal popup</p>
  
  <p><a href="https://i.stack.imgur.com/t9tFO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t9tFO.png" alt="enter image description here"></a></p>
  
  <p>Let me know if you guys need more details</p>
  
  <p>Thank you guys.</p>
  
  <p>3 Div that is being dunamically created with the data from array
  <a href="https://i.stack.imgur.com/VIa2l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VIa2l.png" alt="enter image description here"></a></p>
  
  <p>But when i Click on any button , popup for all div pops up , Thats the issue</p>