TWG Inventory truckload state

PHOTO EMBED

Thu Mar 11 2021 17:28:01 GMT+0000 (UTC)

Saved by @stephanieraymos

import React from "react";
import { FaEdit, FaTrash } from "react-icons/fa";
import { useGlobalContext } from "../context";
import inventory from "../css/inventory.css";

const Inventory = () => {
  const { truckLoad, removeItem, editItem } = useGlobalContext();

  return (
    <>
      <div className="header-items">
        <p className="truck">TRUCK NAME</p>
        <p className="price">PRICE</p>
        <p className="contents">CONTENTS</p>
        <p className="manifest">MANIFEST</p>
        <p className="side-btn-container"></p>
      </div>

      <div className="truckLoad-list">
       


            <>
              <article key={truckLoad.id} className="truckLoad">
                <p className="items truck">{truckLoad.truckName}</p>
                <p className="items price">${truckLoad.truckPrice}</p>
                <p className="items contents">{truckLoad.truckContents}</p>
                <p data-testid="manifestEl" className="items manifest">{truckLoad.truckManifest}</p>
                <div className="side-btn-container">
                  <button
                    type="button"
                    className="edit-btn"
                    onClick={() => editItem(truckLoad.id)}
                  >
                    <FaEdit />
                  </button>
                  <button
                    type="button"
                    className="delete-btn"
                    onClick={() => removeItem(truckLoad.id)}
                  >
                    <FaTrash />
                  </button>
                </div>
              </article>
            </>


      </div>
    </>
  );
};

export default Inventory;

// TP-51
content_copyCOPY

Did not work × TypeError: truckLoad is not iterable handleSubmit C:/Users/Stephanie/Documents/Projects/twg/src/context.js:133 130 | }; 131 | 132 | //Spreading out current truckLoad and adding newTruck to the list > 133 | setTruckLoad([...truckLoad, newTruck]); | ^ 134 | dispatch({ type: "RESET_TRUCK_VALUES", payload: id }); 135 | console.log(newTruck); //Logging new truck for testing purposes 136 | }