How to map data into cards react.js

February 15, 2021 by admin

I’m trying to build a simple shop in react.js.
My next step would be mapping the products which I store in data.js file into separate cards and then a product list. I am using external libraries for Card.

This is data.js (example):

 export const data = [
    {
      id: 1,
      title: "example title",
      content: "example content",
      image: "https://i.imgur.com/example.jpg"
    },
    {
      id: 2,
      title: "example title",
      content: "example content",
      image: "https://i.imgur.com/example.jpg"
    },
    {
      id: 3,
      title: "example title",
      content: "example content",
      image: "https://i.imgur.com/example.jpg"
    },
    ]

That would be a component rendering a single product card:

import React from 'react';
import { Button } from 'react-bootstrap'
import { Card } from '@material-ui/core';
import Col from 'react-bootstrap/Col';
import { data } from '../../../data'


const Product = () => (


  <Col xs={12} md={6} lg={4} key={data.id}>
    <Card style={{ width: '18rem' }}>
      <Card.Header></Card.Header>
      <Card.Img variant="top" src={data.image} />
      <Card.Body>
        <Card.Title>{data.title}</Card.Title>
        <Card.Text>
          {data.content}
        </Card.Text>
        <Button variant="primary">Add to cart</Button>
        <Button>Add to favs</Button>
      </Card.Body>
    </Card>
  </Col>
)

export default Product;

and finally, the component rendring many products:

import React from 'react';

import Row from 'react-bootstrap/Row';
import {data} from '../../../data'

import Product  from '../Product/Product';

import styles from './Shop.module.scss';

const Shop = () => {

  return (
   
      <div className='row-wrapper'>
        <Row>
           {data.map(product => (
            <Product key={product.id} {...product} />
          ))}  
        </Row>
      </div>
    ) 
  
};

export default Shop;

This does not work, I receive errors in the console. What am I missing?

35 thoughts on “How to map data into cards react.js”

You can pass the product details from the shop component to the Product Component through the props, the following code should works:

Product Component

import React from 'react';
import { Button } from 'react-bootstrap'
import { Card } from '@material-ui/core';
import Col from 'react-bootstrap/Col';


const Product = ({product}) => (


  <Col xs={12} md={6} lg={4} key={product.id}>
    <Card style={{ width: '18rem' }}>
      <Card.Header></Card.Header>
      <Card.Img variant="top" src={product.image} />
      <Card.Body>
        <Card.Title>{product.title}</Card.Title>
        <Card.Text>
          {product.content}
        </Card.Text>
        <Button variant="primary">Add to cart</Button>
        <Button>Add to favs</Button>
      </Card.Body>
    </Card>
  </Col>
)

export default Product;

Shop Component

import React from 'react';

import Row from 'react-bootstrap/Row';
import {data} from '../../../data'

import Product  from '../Product/Product';

import styles from './Shop.module.scss';

const Shop = () => {

  return (
   
      <div className='row-wrapper'>
        <Row>
           {data.map(product => (
            <Product key={product.id} product={product} />
          ))}  
        </Row>
      </div>
    ) 
  
};

export default Shop;