title: Is it possible to get access to the values in a map function in Reactjs?
body: <p>I am trying to create a dynamic modal to show one unique content based on a click. Let's say I have 20 buttons each assigned to different components with each component having its own title, image, and descriptive text. I want to show those details unique to that component on my modal.</p>
  <p>I have created all the components in an initial array. I created the event listener and then set it to the value I used to map through all the components on a click but when I click my button the modal shows without the components.</p>
  <p>This is the JSX code for the component</p>
  <pre><code>class pizzas extends Component {
    state ={
      pizzas: [
        {id:1, name: 'Chicken Curry', ingredients: 'Red onions, bell peppers, chicken, pineapple, mozzarella, tomato sauce, curry, chili peppers', price: '3100', image: chickenCurry },
        {id:2, name: 'Pepperoni Fresh', ingredients: 'Pepperoni, mozzarella, green peppers, pizza sauce', price: '2700', image: pepperoniFresh },
        {id:3, name: 'Chicken BBQ', ingredients: 'Chicken, red onions, corn, mozzarella, bbq sauce, tomato sauce', price: '2700', image: chickenBbq },
        {id:4, name: 'Shawarma Pizza', ingredients: 'Mayonnaise &amp; ketchup, spicy chicken, red onions, tomatoes, mozzarella', price: '3100', image: sharwarmaPizza },
        {id:5, name: 'Chicken Suya', ingredients: 'Mayonnaise, spicy sauce, spicy chicken, bell peppers, red onions, suya sauce, tomato sauce, mozzarella, suya spice', price: '2700', image: chickenSuya },
        {id:6, name: 'Pepperoni', ingredients: 'Pepperoni, mozzarella, tomato sauce', price: '2700', image: pepperoni },
        {id:7, name: 'Beef Suya', ingredients: 'Mayonnaise, spicy sauce, spicy meatballs, bell peppers, red onions, mozzarella, suya sauce, tomato sauce, suya spice', price: '2700', image: beefSuya },
        {id:8, name: 'Chicken Supreme', ingredients: 'Spicy sauce, chicken and spicy chicken, mushrooms, bell peppers, olives, red onions, mozzarella, tomato sauce', price: '3100', image: chickenSupreme },
        {id:9, name: 'Sweet Chili Chicken', ingredients: 'Spicy sauce, chicken, chili pepper, mozzarella, sweet chili sauce, tomato sauce', price: '2700', image: chickenCurry },
        {id:10, name: 'Spicy Mixed Pizza', ingredients: 'Spicy sauce, spicy meatballs, spicy chicken, chili pepper, corn, mozzarella, buffalo sauce, tomato sauce', price: '3100', image: spicyMixedPizza },
        {id:11, name: 'Margherita', ingredients: 'Mozarella, tomato sauce', price: '2200', image: margherita },
        {id:12, name: 'Super Meaty', ingredients: 'Chicken, pepperonni, sausages, mozzarella, tomato sauce', price: '3100', image: superMeaty },
        {id:13, name: 'Cheesy Chicken', ingredients: 'Chicken, tomatoes, cheddar, mozzarella, cheese sauce', price: '2700', image: cheesyChicken },
        {id:14, name: 'Cheeseburger Pizza', ingredients: 'Beef, tomatoes, red onions, cheddar, mozzarella, mayonnaise &amp; ketchup, tomato sauce', price: '3100', image: cheeseBurger },
        {id:15, name: 'Meaty Overload', ingredients: 'Spicy sauce, pepperonni, spicy meatballs, chicken, sausages, mozzarella, tomato sauce', price: '3400', image: meatyOverload },
        {id:16, name: 'Meaty BBQ', ingredients: 'Beef, pepperonni, sausages, mozzarella, bbq sauce, tomato sauce', price: '3100', image: meatyBbq },
        {id:17, name: 'Hawaiian', ingredients: 'Chicken, pineapple, mozzarella, sweet chili sauce, tomato sauce', price: '2700', image: hawaiian },
        {id:18, name: 'Veggie Overload', ingredients: 'Mushrooms, bell peppers, corn, olives, red onions, tomatoes, mozzarella, tomato sauce', price: '3100', image: veggieOverload }
      ],
      showModal: false,
      selectedPizza: null
    }
    toggleModalHandler = (p)=&gt;{
      this.setState({showModal: !this.state.showModal, selectedPizza: p});
      
    }
    render(){
    const pizza = this.state.pizzas;
    
    return (
     &lt;Aux&gt;
     { this.state.showModal ?
       &lt;Modal 
  
       ingredients={this.state.selectedPizza.ingredients} 
       price={this.state.selectedPizza.price} 
       image={this.state.selectedPizza.image} 
       name={this.state.selectedPizza.name} 
       key={this.state.pizzas.id} 
            
       /&gt;: null}
      
       &lt;div className={styles.Pizza}&gt;
               &lt;h1&gt;Pizza&lt;/h1&gt;
        &lt;div className={styles.PizzaContainer}&gt;
           {pizza.map(p=&gt;{
             
      return &lt;div&gt;
         &lt;div className={styles.PizzaCard}&gt;
             &lt;div className={styles.PizzaCardHeader}&gt;
             &lt;img src={p.image} alt=&quot;pizza&quot;/&gt;
             &lt;h1&gt;{p.name}&lt;/h1&gt;
            &lt;p&gt;{p.ingredients}&lt;/p&gt;
            &lt;/div&gt;
            &lt;div className={styles.PizzaCardFooter}&gt;
            &lt;h3&gt;from ₦{p.price}&lt;/h3&gt;
             &lt;button onClick={(p)=&gt;this.toggleModalHandler(p)}&gt;Select&lt;/button&gt;
           &lt;/div&gt;  
      &lt;/div&gt;
      &lt;/div&gt;
    })}
        &lt;/div&gt;
        &lt;/div&gt;
   
    &lt;/Aux&gt;
    )
  
  }
  }
  export default pizzas;
  </code></pre>
  <p>In the code, I set the selected Pizza to 'p' on a button click and I used the same P in the map function but it's not working.</p>