How to map data into cards react.js

by

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?

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

  1. Pingback: latest study results hydroxychloroquine
  6. Pingback: hydroxychloroquine order online
  7. Pingback: hydroxychloroquine for humans where to buy
  15. Pingback: should you take ivermectil every day
  25. Pingback: stromectol online without prescription
  27. Pingback: tab stromectol 6mg
  40. Pingback: how much does ivermectin cost without insurance
  47. Pingback: prednisone 50 mg

Leave a Comment