First properly working implementation

src/App.js

@@ -1,8 +1,8 @@
 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,6 @@ function App() {
           <Logo />
         </header>
         <h1>Guillotine-cutter App</h1>
-
         <Workplace />
       </div>
     </>

src/Test.js

@@ -0,0 +1,35 @@
+import React from "react";
+class Test extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: "Please write an essay about your favorite DOM element.",
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({ value: event.target.value });
+  }
+  handleSubmit(event) {
+    alert("An essay was submitted: " + this.state.value);
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Essay:
+          <textarea
+            value={this.state.value}
+            onChange={this.handleChange}
+          />{" "}
+        </label>
+        <input type="submit" value="Submit" />
+      </form>
+    );
+  }
+}
+export default Test;

src/components/List.css

@@ -0,0 +1,9 @@
+.list {
+  width: 1000px;
+  height: 1000px;
+  margin: auto;
+  width: 50%;
+  display: block;
+  position: relative;
+  border: solid brown;
+}

src/components/List.js

@@ -1,10 +1,23 @@
+import "./List.css";
 export default function List(props) {
   const rectangles = props.rectangles;
-  const listItems = rectangles.map((rectangle) => (
+  const listRectangles = rectangles.map((rectangle) => (
-    <li>
+    <div
+      style={{
+        width: rectangle.w,
+        height: rectangle.h,
+        border: "solid",
+        display: "inline-block",
+        position: "relative",
+      }}
+    >
       {rectangle.w} x {rectangle.h}
-    </li>
+    </div>
   ));
 
-  return <> {listItems}</>;
+  return (
+    <>
+      <div className="list">{listRectangles}</div>
+    </>
+  );
 }

src/components/Workplace.js

@@ -1,18 +1,20 @@
 import { useState } from "react";
 import List from "./List";
 
-export default function Workplace() {
+export default function Workplace(props) {
   const [width, setWidth] = useState("");
   const [height, setHeight] = useState("");
-  const [rectangleArray, setRectangleArray] = useState("");
+  const [rectanglesItems, setRectanglesItems] = useState([]);
-
-  const rectangles = [{ w: "100px", h: "100px", c: "red" }];
-  rectangles.push({ w: "200px", h: "300px", c: "cyan" });
 
   const handleFormSubmit = (e) => {
     e.preventDefault();
-    rectangles.push({ w: width + "px", h: height + "px", c: "blue" });
+    setRectanglesItems([
-    console.log(rectangles);
+      ...rectanglesItems,
+      {
+        w: width + "px",
+        h: height + "px",
+      },
+    ]);
   };
 
   return (
@@ -34,7 +36,7 @@ export default function Workplace() {
         </label>
         <input type="submit" value="Submit" />
       </form>
-      <List rectangles={rectangles} />
+      <List rectangles={rectanglesItems} />
     </>
   );
 }