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;

I remade te post maybe you can understand it if you read it now? — Chinomso Johnson
– Chinomso Johnson, Commented Jul 17, 2020 at 13:15
if you console.log(this.props) in pizzaModal you get undefined? — Ricardo Sanchez
– Ricardo Sanchez, Commented Jul 17, 2020 at 14:26

Ricardo Sanchez · Accepted Answer · 2020-07-17 14:44:12Z

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>
});

edited Jul 17, 2020 at 14:44

answered Jul 17, 2020 at 14:19

Ricardo Sanchez

5,21213 gold badges62 silver badges97 bronze badges

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

2 Comments

Chinomso Johnson Over a year ago

This works but it shows just the selected array element. So if you select 0. It shows just the details for the first modal regardless of where you click. I wanted to get a dynamic modal content based on what is clicked.

Ricardo Sanchez Over a year ago

Simple, you just have to pass the index of the selected pizza in the pizzas array to the modal, like I show you by using the selected_pizza constant, but in your case you can change it to a variable, hope that makes sence

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related