I'm trying to access my local database using map method but always encountered this error.
I want to access my array of objects and display it using cards components.
Searched everywhere about my syntax but i can't seem to find any, is there an error of my code?
Here is my code:
import React, { Component } from 'react'
import { Container } from "react-bootstrap";
import products from '../database/db.json'
import {
Card,
Button
} from 'react-bootstrap'
export default class Home extends Component {
render() {
return(
products.map((products)=> {
return(
<Card style={{ width: '18rem', marginTop: '15px', marginRight: '15px' }} key={products.id}>
<div>
<Card.Img variant="top" src={products.images[0]} />
</div>
<Card.Body>
<Card.Title>{products.name}</Card.Title>
<Card.Text><strong>IDR {products.price.toLocaleString()},00</strong></Card.Text>
<div>
<Button variant="outline-light">
<i className="far fa-bookmark"></i>
</Button>
{/* <Button variant="outline-light" as={Link} to={`/detail?${item.id}`}>
<i className="fas fa-cart-plus"></i> Buy Now
</Button> */}
</div>
</Card.Body>
</Card>
)
})
)
and here is my database :
{
"products": [
{
"id": 1,
"name": "Nike Air Brown",
"img": "https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1000&q=80",
"price": 1987000,
"stock": 8,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. In fermentum et sollicitudin ac orci phasellus egestas tellus. Eget sit amet tellus cras. "
},
{
"id": 2,
"name": "Nike Air Jordan",
"img": "https://images.unsplash.com/photo-1597248881519-db089d3744a5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80",
"price": 2543000,
"stock": 9,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. In fermentum et sollicitudin ac orci phasellus egestas tellus. Eget sit amet tellus cras. "
},
{
"id": 3,
"name": "Nike Revolt",
"img": "https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80",
"price": 1765000,
"stock": 6,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. In fermentum et sollicitudin ac orci phasellus egestas tellus. Eget sit amet tellus cras. "
},
{
"id": 4,
"name": "Nike Green",
"img": "https://images.unsplash.com/photo-1596568359553-a56de6970068?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1028&q=80",
"price": 2143000,
"stock": 7,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. In fermentum et sollicitudin ac orci phasellus egestas tellus. Eget sit amet tellus cras. "
}
],
"users": [],
"transactions": []
}