Code only reading, don't merge :""

client/src/components/pages/SellHistory.js

@@ -1,22 +1,40 @@
-import React from "react"
-import ItemsList from "../layouts/soldItemList"
+import React, {useState} from "react"
+import {items} from "../layouts/boughtItemList"
+import {Item1} from "../layouts/boughtItemList"
+import {Item2} from "../layouts/boughtItemList"
+import Buttons from "../layouts/boughtItemList";
+import Button from "react-bootstrap/esm/Button";
 
-export default function SellHistory() {
-    return(
-        <div className='w-full flex flex-col mt-2 items-center'>
+export default function BuyHistory() {
+    const [item, setItem] = useState(items);
+
+    const menuItems = items.map((item) => item.state);
+
+    const filterItem = (cur) => {
+        const newItem = items.filter((val) => {
+        return val.state === cur;
+        });
+        setItem(newItem);
+    };
+    return (
+        <>
+        <div className="w-full flex flex-col items-center">
             <div className="flex flex-row flex-wrap justify-start mt-2 mb-4">
-                    <button className={`rounded-full pl-4 pr-4 pt-2 pb-2 border-2 m-2`}
-                        // onClick={onClickSearchByNameBtn}
-                    >
-                        Đang rao bán
-                    </button>
-                    <button className={`rounded-full pl-4 pr-4 pt-2 pb-2 border-2 m-2`}
-                        // onClick={onClickSearchByTagBtn}
-                    >
-                        Đã bán
-                    </button>
+                <button className={`rounded-full pl-4 pr-4 pt-2 pb-2 border-2 m-2`}
+                    onClick={filterItem("1")}
+                >
+                    Đang đánh dấu
+                </button>
+                <button className={`rounded-full pl-4 pr-4 pt-2 pb-2 border-2 m-2`}
+                    onClick={filterItem("2")}
+                >
+                    Đã mua
+                </button>
             </div>
-            <ItemsList />
         </div>
+        <div className="w-full flex flex-col items-center" style={{"maxWidth":"682px"}}>
+            <menuItems item={item}/>
+        </div>
+        </>
     )
-}
+}