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.

Vitali T · Accepted Answer · 2020-07-17 19:43:45Z

2

try this:

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

answered Jul 17, 2020 at 19:43

Vitali T

3591 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jnotelddim Over a year ago

For anyone who comes across this thread and doesn't quite understand what's going on: The issue is just that there are two variables p being declared in the same scope -- the first one is the actual desired variable which results from mapping through the array, but then that's trumped by the later declaration, which is actually taking the 'event' data and calling it p (see reactjs.org/docs/handling-events.html)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related