Cost table static

CostTableStatic.js

import React, { useState } from "react";

import "./CostTable.css"

const _defaultCosts = [
  {
    name: "Rice",
    price: 40
  },
  {
    name: "Noodle",
    price: 20
  }
];

const CostTable = () => {
  const [costs, setCosts] = useState(_defaultCosts);

  return (
    <div className="table">
      <div className="table-title">Food costs</div>
      <div className="table-content">
        <div className="table-header">
          <div className="table-row">
            <div className="table-data">
              <div>Item</div>
            </div>
            <div className="table-data">
              <div>Value</div>
            </div>
          </div>
        </div>
        <div className="table-body">
          {costs.map((item, index) => (
            <div className="table-row" key={index}>
              <div className="table-data">
                <input
                  name="name"
                  data-id={index}
                  type="text"
                  value={item.name}
                  onChange={null}
                />
              </div>
              <div className="table-data">
                <input
                  name="price"
                  data-id={index}
                  type="number"
                  value={item.price}
                  onChange={null}
                />
              </div>
            </div>
          ))}
          <div className="table-row">
            <div className="table-data">
              <button onClick={null}>+</button>
            </div>
          </div>
        </div>
        <div className="table-footer">
          <div className="table-row">
            <div className="table-data">
              <div>Total</div>
            </div>
            <div className="table-data">
              <div>60</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CostTable;