0

Недавно начал изучать React, появился вопрос про повторяемые компоненты на странице, у которых отличаются только пропсы. Есть файл App.js, в нём блок menu, куда я пихаю компоненты:

    <div className="menu">
      <Card title={"Пепперонни"} image={"/images/pizzaPeperoni.png"} price={120} modalContent={recipe}/>
      <Card title={"Салями"} image={"/images/pizzaSalami.png"} price={99} modalContent={recipe}/>
      <Card title={"Гавайская"}  image={"/images/pizzaGavaiskia.png"} price={81} modalContent={recipe}/>
      <Card title={"Грибная"}  image={"/images/pizzaGribnaia.png"} price={144} modalContent={recipe}/>
      <Card title={"4 сезона"} image={"/images/pizzaFourSesons.png"} price={120} modalContent={recipe}/>
    </div>

И сам компонент карточки:

import React, {useState} from 'react';

import Modal from "./Modal";

const Card = (props) => { const [isOpened, setIsOpened] = useState(false);

const title = ['Пепперонни', 'Салями', 'Гавайская', 'Грибная', '4 сезона']

return (
    <div className="card">
        <img className="info" src="/images/info.png" alt="info" onClick={() => setIsOpened(true)}/>
        <img src= {props.image} alt="pizza" />
        <div className="aboutPizza">
            <h1>{title.map(i => i)}</h1>
            <div className={"buttons"}>
                <form className="first">
                    <button>20 см</button>
                    <button>25 см</button>
                    <button>30 см</button>
                </form>
                <form className="second">
                    <button>Толстое тесто</button>
                    <button>Тонкое тесто</button>
                </form>
            </div>
            <h2>{props.price} BYN</h2>
        </div>
        <Modal isOpened={isOpened} setIsOpened={setIsOpened}/>
    </div>
);
};

export default Card;

Допустим, мне нужно добавить на страницу ещё 20 таких карточек. Как сделать это проще и красивее, вместо того, чтобы 20 раз прописывать в классе menu 20 карточек со своими пропсами?

3
  • На код в h1 не обращайте внимание, это попытки решить мою проблему
    – Spenkau
    21 окт 2022 в 8:47
  • обычный цикл. в чем проблема ?
    – qwerty
    21 окт 2022 в 9:02
  • Я понимаю что необходим цикл, но синтаксис реакта, а точнее jsx очень нов для меня, слабо понимаю кроме html вёрстки
    – Spenkau
    26 окт 2022 в 12:18

2 ответа 2

3

Просто прокидывайте данные в цикле

data = [{
    title: 'Пепперонни',
    image: '/images/pizzaPeperoni.png',
    price: 200,
    modalContent: recipe,
  },
  {
    title: 'Пепперонни',
    image: '/images/pizzaPeperoni.png',
    price: 200,
    modalContent: recipe,
  }
];

<div className="menu">
{data.map(({...item},index)=>(
  <Card 
      key ={index}
      {...item}
  />
)
</div>
1
  • Спасибо большое
    – Spenkau
    23 окт 2022 в 15:41
-1

лучший вариант, это поместить данные в JSON файл и размапить его единожды

    import data from './data.json';

    data.map((item)=>{
      <Card data={data} key={item.id}> />
    })
1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 15 фев в 9:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.