Cleaned up, extracted List to a component

src/App.js

@@ -2,7 +2,7 @@ import "./App.css";
 import Playground from "./components/Playground";
 import Logo from "./components/Logo";
 import Workplace from "./components/Workplace";
-
+//        <Playground title="👨🏻‍💻" />
 function App() {
   return (
     <>
@@ -11,7 +11,7 @@ function App() {
           <Logo />
         </header>
         <h1>Guillotine-cutter App</h1>
-        <Playground title="👨🏻‍💻" />
+
         <Workplace />
       </div>
     </>

src/components/List.js

@@ -0,0 +1,10 @@
+export default function List(props) {
+  const rectangles = props.rectangles;
+  const listItems = rectangles.map((rectangle) => (
+    <li>
+      {rectangle.w} x {rectangle.h}
+    </li>
+  ));
+
+  return <> {listItems}</>;
+}

src/components/Workplace.js

@@ -1,18 +1,24 @@
 import { useState } from "react";
+import List from "./List";
 
 export default function Workplace() {
-  let figurki = [{ w: "100px", h: "100px", c: "red" }];
   const [width, setWidth] = useState("");
   const [height, setHeight] = useState("");
+  const [rectangleArray, setRectangleArray] = useState("");
 
-  const handleSubmit = (evt) => {
+  const numbers = [{ w: "100px", h: "100px", c: "red" }];
-    evt.preventDefault();
+  numbers.push({ w: "200px", h: "300px", c: "cyan" });
-    figurki.push({ w: width + "px", h: height + "px", c: "blue" });
+
-    console.log(figurki);
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    numbers.push({ w: width + "px", h: height + "px", c: "blue" });
+    console.log(numbers);
   };
+
   return (
     <>
-      <form onSubmit={handleSubmit}>
+      <br />
+      <form onSubmit={handleFormSubmit}>
         <label>
           Dimensions:
           <input
@@ -28,15 +34,7 @@ export default function Workplace() {
         </label>
         <input type="submit" value="Submit" />
       </form>
-      <ul>
+      <List rectangles={rectangles} />
-        {figurki.map((figurka, index) => {
-          return (
-            <li key={index}>
-              {figurka.w} x {figurka.h}
-            </li>
-          );
-        })}
-      </ul>
     </>
   );
 }