How can I correctly render elements from an array in Reactjs?

Question

I am building a web application for ordering pizza. I would love this to be a part of my portfolio. But I am stuck. I created a modal and hardcoded some contents into this modal to enable me to style it. I want to use this modal on the click of a button but instead of my hardcoded content, I want to show dynamic content related to the section that was clicked.

I am having a bit of trouble posting pictures but the site could be accessed through https://chinomso1995.github.io/dodosPizza/.

Once you open the site up, you see the modal. The image is displayed on the left-hand side and the title and paragraphs on the right-hand side. This was all hardcoded. However, if you look at the pizza sections, you would see I have a pizza image and then its title and ingredients all listed. I am trying to dynamically display the elements in the pizza section in the modal on the click of a button.

I have grouped the elements into an array and tried accessing them via props but have been unsuccessful. I just need pointers on how to go about this. This is my first react project.

The code for the Pizza component and the modal can be accessed via https://codepen.io/chinomso1995/pen/mdVzZJE

I would also post it here

Code for the Pizza 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,
  }
  removeModalHandler = (item)=>{
    this.setState({showModal: !this.state.showModal})
  }
  render(){
  return (
   <Aux>
   { this.state.showModal ?
     <Modal ingredients={this.state.pizzas.ingredients} image={this.state.pizzas.image} name={this.state.pizzas.name} key={this.state.pizzas.id}/>: null}
   <div className={styles.Pizza}>
     <h1>Pizza</h1>
     <div className={styles.PizzaContainer}>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={chickenCurry} alt="chickencurry"/>
          <h1>Chicken Curry</h1>
          <p>Red onions, bell peppers, chicken, pineapple, mozzarella, tomato sauce, curry, chili peppers</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button onClick={this.removeModalHandler}>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={pepperoniFresh} alt="pepperonifresh"/>
          <h1>Pepperoni Fresh</h1>
          <p>Pepperoni, mozzarella, green peppers, pizza sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={chickenBbq} alt="chickenbbq"/>
          <h1>Chicken BBQ</h1>
          <p>Chicken, red onions, corn, mozzarella, bbq sauce, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
         <img src={sharwarmaPizza} alt="sharwarma"/>
          <h1>Shawarma Pizza</h1>
          <p>Mayonnaise & ketchup, spicy chicken, red onions, tomatoes, mozzarella</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={chickenSuya} alt="chickensuya"/>
          <h1>Chicken Suya</h1>
          <p>Mayonnaise, spicy sauce, spicy chicken, bell peppers, red onions, suya sauce, tomato sauce, mozzarella, suya spice</p>
         </div>
        <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
           <img src={pepperoni} alt="pepperoni"/>
           <h1>Pepperoni</h1>
           <p>Pepperoni, mozzarella, tomato sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={beefSuya} alt="beefsuya"/>
          <h1>Beef Suya</h1>
          <p>Mayonnaise, spicy sauce, spicy meatballs, bell peppers, red onions, mozzarella, suya sauce, tomato sauce, suya spice</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={chickenSupreme} alt="chickensupreme"/>
          <h1>Chicken Supreme</h1>
          <p>Spicy sauce, chicken and spicy chicken, mushrooms, bell peppers, olives, red onions, mozzarella, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
         <img src={sweetChiliChicken} alt="sweetchillichicken"/>
          <h1>Sweet Chili Chicken</h1>
          <p>Spicy sauce, chicken, chili pepper, mozzarella, sweet chili sauce, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={spicyMixedPizza} alt="spicymixed"/>
          <h1>Spicy Mixed Pizza</h1>
          <p>Spicy          sauce, spicy meatballs, spicy chicken, chili pepper, corn, mozzarella, buffalo sauce, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={margherita} alt="margherita"/>
          <h1>Margherita</h1>
          <p>Mozzarella, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,200</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={superMeaty} alt="supermeaty"/>
          <h1>Super Meaty</h1>
          <p>Chicken, pepperonni, sausages, mozzarella, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={cheesyChicken} alt="cheesychicken"/>
          <h1>Cheesy Chicken</h1>
          <p>Chicken, tomatoes, cheddar, mozzarella, cheese sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={cheeseBurger} alt="cheeseburger"/>
          <h1>Cheeseburger Pizza</h1>
          <p>Beef, tomatoes, red onions, cheddar, mozzarella, mayonnaise & ketchup, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={meatyOverload} alt="meatyoverload"/>
          <h1>Meaty Overload</h1>
          <p>Spicy sauce, pepperonni, spicy meatballs, chicken, sausages, mozzarella, tomato sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,400</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={meatyBbq} alt="meatybbq"/>
          <h1>Meaty BBQ</h1>
          <p>Beef, pepperonni, sausages, mozzarella, bbq sauce, tomato sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={hawaiian} alt="hawaiin"/>
          <h1>Hawaiian</h1>
          <p>Chicken, pineapple, mozzarella, sweet chili sauce, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={veggieOverload} alt="veggie"/>
          <h1>Veggie Overload</h1>
          <p>Mushrooms, bell peppers, corn, olives, red onions, tomatoes, mozzarella, tomato sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
     </div>
   </div>
   </Aux>
  )
}
}
export default pizzas;

Code for the modal

class pizzaModal extends Component {
  state = {
    selected: "small"
  }
  toggleHandler = (size)=> ()=>{
    this.setState({
            toggle: size
        });
  }
  render (){
    let attachedClasses = [styles.ImageContainer]
    if(this.state.toggle==='small'){
      attachedClasses = [styles.ImageContainer, styles.Small]
    }
    if(this.state.toggle==="medium"){
      attachedClasses = [styles.ImageContainer, styles.Medium]
    }
    if(this.state.toggle==="large"){
      attachedClasses=[styles.ImageContainer, styles.Large]
    }
    return (
      <div className={styles.Pizzamodal}>
          <div className={styles.ModalContainer}>
            <div className={attachedClasses.join(' ')}>
              <img  src={this.props.image} alt="pizzapicture"/>
            </div>
            <div className={styles.DetailsContainer}>
              <div>
                <div className={styles.TextDetails}>
                  <h1>{this.props.name}</h1>
                  <p>{this.props.ingredients}</p>
                </div>
                <div>
                <div className={styles.Form}>
                <form className={styles.switchButton}>
                  <input type="radio" name="pizza" id="small" value="small" onChange={this.toggleHandler("small")}
                            checked={this.state.toggle==="small"}/>
                  <label for="small">Small</label>
                  <input type="radio" name="pizza" id="medium" value="medium" onChange={this.toggleHandler("medium")}
                            checked={this.state.toggle==="medium"}/>
                  <label for="medium">Medium</label>
                  <input type="radio" name="pizza" id="large" value="large" onChange={this.toggleHandler("large")}
                            checked={this.state.toggle==="large"}/>
                  <label for="large">Large</label>
                </form>
                </div>
                <div className={styles.orderButton}>
                  <button>Add to basket for ₦4,100</button>
                </div>
              </div>
              </div>
            </div>
            
          </div>
      </div>
    )
  }
}
export default pizzaModal;

Answer 1

I think the problem is in this line:

<Modal ingredients={this.state.pizzas.ingredients} image={this.state.pizzas.image} name={this.state.pizzas.name} key={this.state.pizzas.id}/>: null}

Pizzas is an array of objects so if your modal function is to showcase the selected pizza then just pass the pizza in question to you Modal props like:

this.state.pizzas[0]

<Modal ingredients={this.state.pizzas[0].ingredients} image={this.state.pizzas[0].image} name={this.state.pizzas[0].name} key={this.state.pizzas[0].id}/>: null}

Or better use an variable like: const selected_pizza = 0;

<Modal ingredients={this.state.pizzas[selected_pizza].ingredients} image={this.state.pizzas[selected_pizza].image} name={this.state.pizzas[selected_pizza].name} key={this.state.pizzas[selected_pizza].id}/>: null}

You may want to look at using Javascrip map() function to trim the code to a simple call to render this elements

<div className={styles.PizzaCard}>
 <div className={styles.PizzaCardHeader}>
  <img src={margherita} alt="margherita"/>
  <h1>Margherita</h1>
  <p>Mozzarella, tomato sauce</p>
 </div>
 <div className={styles.PizzaCardFooter}>
  <h3>from ₦2,200</h3>
  <button>Select</button>
 </div>

For example:

pizzas.map(p => {
    return <div>
        <div className={styles.PizzaCard}>
            <div className={styles.PizzaCardHeader}>
                <img src={margherita} alt="margherita"/>
                <h1>{p.name}</h1>
                <p>{p.ingredients}</p>
            </div>
        <div className={styles.PizzaCardFooter}>
            <h3>from {p.price}</h3>
            <button>Select</button>
        </div>
    </div>
</div>
});