Javascript 如何在Reactjs中正确渲染数组中的元素？

我正在构建一个用于订购比萨饼的web应用程序。我希望这能成为我投资组合的一部分。但是我被卡住了。我创建了一个模式，并将一些内容硬编码到这个模式中，以使我能够对其进行样式设置。我希望在单击按钮时使用此模式，但我希望显示与单击的部分相关的动态内容，而不是硬编码的内容

我有点麻烦张贴图片，但该网站可以通过访问

打开站点后，您将看到模态。图像显示在左侧，标题和段落显示在右侧。这些都是硬编码的。然而，如果你看一下比萨饼的部分，你会发现我有一张比萨饼的图片，然后它的标题和配料都列出来了。我试图通过点击按钮在模式中动态显示pizza部分中的元素

我已经将元素分组到一个数组中，并尝试通过道具访问它们，但没有成功。我只是想知道该怎么做。这是我的第一个项目

比萨饼组件和模式的代码可以通过

我也会把它贴在这里

比萨饼组件的代码

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;

class pizzas扩展组件{
陈述={
比萨饼：[
{id:1，名称：'咖喱鸡'，配料：'红洋葱，甜椒，鸡肉，菠萝，马苏里拉，番茄酱，咖喱，辣椒'，价格：'3100'，图片：chickenCurry}，
{id:2，名称：'Pepperoni Fresh'，配料：'Pepperoni，mozzarella，青椒，比萨酱'，价格：'2700'，图片：Pepperoni Fresh}，
{id:3，名称：“鸡肉烧烤”，配料：“鸡肉、红洋葱、玉米、马苏里拉、烧烤酱、番茄酱”，价格：“2700”，图片：Chickenbq}，
{id:4，名称：'Shawarma Pizza'，配料：'蛋黄酱和番茄酱，辣鸡肉，红洋葱，西红柿，马苏里拉干酪'，价格：'3100'，图片：sharwarmaPizza}，
{id:5，名称：'Chicken Suya'，配料：'蛋黄酱，辣酱，辣味鸡，甜椒，红洋葱，Suya酱，番茄酱，马苏里拉，Suya香料'，价格：'2700'，图片：chickenSuya}，
{id:6，名称：'Pepperoni'，配料：'Pepperoni，mozzarella，番茄酱'，价格：'2700'，图片：Pepperoni}，
{id:7，名称：'Beef Suya'，配料：'蛋黄酱，辛辣酱，辛辣肉丸，甜椒，红洋葱，马苏里拉，Suya酱，番茄酱，Suya香料'，价格：'2700'，图片：beefSuya}，
{id:8，名称：'Chicken Supreme'，配料：'辣酱，鸡肉和辣酱鸡肉，蘑菇，甜椒，橄榄，红洋葱，马苏里拉，番茄酱'，价格：'3100'，图片：Chickensurepreme}，
{id:9，名称：'甜辣椒鸡'，成分：'辣酱，鸡肉，辣椒，马苏里拉，甜辣椒酱，番茄酱'，价格：'2700'，图片：chickenCurry}，
{id:10，名称：'辛辣混合比萨'，配料：'辛辣酱汁，辛辣肉丸，辛辣鸡肉，辣椒，玉米，马苏里拉，水牛酱汁，番茄酱汁'，价格：'3100'，图片：Spicymix比萨}，
{id:11，名称：'Margarita'，配料：'Mozarella，番茄酱'，价格：'2200'，图片：Margarita}，
{id:12，名称：'超级肉味'，配料：'鸡肉，胡椒粉，香肠，马苏里拉，番茄酱'，价格：'3100'，图片：超级肉味}，
{id:13，名称：'奶酪鸡'，配料：'鸡肉，番茄，切达干酪，马苏里拉干酪，奶酪酱'，价格：'2700'，图片：Cheesechicken}，
{id:14，名称：'Cheeseburger Pizza'，配料：'牛肉、番茄、红洋葱、切达干酪、马苏里拉干酪、蛋黄酱和番茄酱、番茄酱'，价格：'3100'，图片：Cheeseburger}，
{id:15，名称：'肉类过载'，成分：'辛辣酱，胡椒粉，辛辣肉丸，鸡肉，香肠，马苏里拉，番茄酱'，价格：'3400'，图片：meatyOverload}，
{id:16，名称：'Meaty BBQ'，配料：'牛肉、胡椒粉、香肠、马苏里拉、烧烤酱、番茄酱'，价格：'3100'，图片：meatyBbq}，
{id:17，名称：'夏威夷'，配料：'鸡肉，菠萝，马苏里拉，甜辣椒酱，番茄酱'，价格：'2700'，图片：夏威夷}，
{id:18，名称：“蔬菜超载”，成分：“蘑菇、甜椒、玉米、橄榄、红洋葱、西红柿、马苏里拉干酪、番茄酱”，价格：“3100”，图片：蔬菜超载}
],
showModal：错，
}
removeModalHandler=（项目）=>{
this.setState（{showmodel:！this.state.showmodel}）
}
render（）{
返回(
{this.state.showmodel？
：null}
披萨
咖哩鸡
红洋葱、甜椒、鸡肉、菠萝、马苏里拉、番茄酱、咖喱、辣椒

从3100起
挑选
新鲜意大利香肠
意大利香肠、马苏里拉、青椒、比萨酱

从2700起
挑选
烤鸡
鸡肉、红洋葱、玉米、马苏里拉干酪、烧烤酱、番茄酱

从2700起
挑选
沙瓦玛披萨
蛋黄酱和番茄酱、辣鸡肉、红洋葱、西红柿、马苏里拉

从3100起
挑选
素雅鸡
蛋黄酱，辣酱，辣味鸡肉，甜椒，红洋葱，苏雅酱，番茄酱，马苏里拉，苏雅香料

从2700起
挑选
意大利 辣味 香肠
意大利香肠、马苏里拉、番茄酱

从2700起
挑选
牛肉素雅
蛋黄酱、辛辣沙司、辛辣肉丸、甜椒、红洋葱、马苏里拉、苏亚沙司、番茄沙司
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;

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

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

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

<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>

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