Is it possible to get access to the values in a map function in Reactjs?

Question

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.

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.

This is the JSX code for the component

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 & 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 & 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)=>{
    this.setState({showModal: !this.state.showModal, selectedPizza: p});
    
  }
  render(){
  const pizza = this.state.pizzas;
  
  return (
   <Aux>
   { this.state.showModal ?
     <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} 
          
     />: null}
    
     <div className={styles.Pizza}>
             <h1>Pizza</h1>
      <div className={styles.PizzaContainer}>
         {pizza.map(p=>{
           
    return <div>
       <div className={styles.PizzaCard}>
           <div className={styles.PizzaCardHeader}>
           <img src={p.image} alt="pizza"/>
           <h1>{p.name}</h1>
          <p>{p.ingredients}</p>
          </div>
          <div className={styles.PizzaCardFooter}>
          <h3>from ₦{p.price}</h3>
           <button onClick={(p)=>this.toggleModalHandler(p)}>Select</button>
         </div>  
    </div>
    </div>
  })}
      </div>
      </div>
 
  </Aux>
  )

}
}
export default pizzas;

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.

Answer 1

try this:

  <button onClick={()=>this.toggleModalHandler(p)}>Select</button>