×

React Js

The World's best Software Development Study Portal

Map Function

(npm install bootstrap)

import React from 'react'; import DATA from './Data'; const Product = () => { const cardItem = (item) => { return ( <div class="card my-5 py-4" key={item.id} style={{width:"18rem"}}> <img src={item.img} class="card-img-top" alt={item.title} /> <div class="card-body text-center"> <h5 class="card-title">{item.title}</h5> <p class="lead">${item.price}</p> </div> </div> ); } return ( <div> <div className="container py-5"> <div className="row"> <div className="col-12 text-center"> <h1>Product</h1> <hr /> </div> </div> <div className="container"> <div className="row justify-content-around"> {DATA.map(cardItem)} </div> </div> </div> </div> ); }; export default Product; ------------------------------------------------------------------------------

Map Function (Data.js)

const DATA = [ { id: 0, title: "HP LAPTOP", price:20000, desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", img: "image/745.JPG" }, { id: 1, title: "HP LAPTOP", price:20000, desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ", img: "/image/746.JPG" }, { id: 2, title: "DELL LAPTOP", price:19000, desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ", img: "/image/748.JPG" }, { id: 3, title: "DELL LAPTOP", price: 19000, desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", img: "/image/749.JPG" }, { id: 4, title: "LENOVO LAPTOP", price:19000, desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ", img: "/image/750.PNG" }, { id: 5, title: "LENOVO LAPTOP", price:19000, desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", img: "/image/751.JPG" }, { id: 6, title: "LENOVO LAPTOP", price:19000, desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ", img: "/image/751.JPG" }, { id: 7, title: "LENOVO LAPTOP", price:19000, desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ", img: "/image/751.JPG" }, { id: 8, title: "LENOVO LAPTOP", price:19000, desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", img: "/image/751.JPG" } ] export default DATA;