Недавно начал изучать 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 карточек со своими пропсами?