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?
You can pass the product details from the shop component to the Product Component through the props, the following code should works:
Product Component
Shop Component