Display the static data

We need an object to hold the data when it’s read in from a file or network, this gives us constency

Required files

SalesHistory.jsx

import { Col, Container, Row } from "react-bootstrap";
import { SalesHeader } from "./SalesHeader";
import salesDataHistory from '../data/sales.json'
import SaleItem from "./SaleItem.model";
import Sale from "./Sale";

export const SalesHistory = (props) => {
    const sales = salesDataHistory.map(currentSaleItem => {
        const newSaleItem = new SaleItem(currentSaleItem.salePrice, currentSaleItem.totalPrice, currentSaleItem.vatToPay, currentSaleItem._id);
        return <Sale saleItem={newSaleItem} key={saleItem._id} />
    });
    return (
        <Container className="p-5 mb-4 bg-light rounded-3">
            <Row className="p-1 mb-1 bg-light rounded-3">
                <SalesHeader/>
            </Row>
            <Row className="p-1 mb-1 bg-light rounded-3">
            <table className="table table-striped">
                <thead>
                    <tr>
                        <th>Sale Price</th>
                        <th>Total Price</th>
                        <th>VAT To Pay</th>
                    </tr>
                </thead>
                <tbody>{sales}</tbody>
            </table>
            </Row>
        </Container>
    );
}

SalesHeader.jsx

export const SalesHeader = () =>
{
    return (
        <h2>Sales History</h2>
    )
}

Sale.jsx

import React from 'react';
import PropTypes from 'prop-types';
import SaleItem from './SaleItem.model';

const Sale = ({ saleItem }) => {
    return (
        <tr>
            <td>{saleItem.salePrice}</td>
            <td>{saleItem.totalPrice}</td>
            <td>{saleItem.vatToPay}</td>
        </tr>
    );
};

Sale.propTypes = {
    saleItem: PropTypes.instanceOf(SaleItem)
}

export default Sale;

MAN - Software Development

3.1-added_saleshistory

Required files

SalesHistory.jsx

SalesHeader.jsx

Sale.jsx

SaleItem.model.js

Related content