First properly working implementation
This commit is contained in:
parent
f45abdecc9
commit
f23f2e05d8
File diff suppressed because one or more lines are too long
@ -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>
|
||||
</>
|
||||
|
35
src/Test.js
Normal file
35
src/Test.js
Normal file
@ -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;
|
9
src/components/List.css
Normal file
9
src/components/List.css
Normal file
@ -0,0 +1,9 @@
|
||||
.list {
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
display: block;
|
||||
position: relative;
|
||||
border: solid brown;
|
||||
}
|
@ -1,10 +1,23 @@
|
||||
import "./List.css";
|
||||
export default function List(props) {
|
||||
const rectangles = props.rectangles;
|
||||
const listItems = rectangles.map((rectangle) => (
|
||||
<li>
|
||||
const listRectangles = rectangles.map((rectangle) => (
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -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 rectangles = [{ w: "100px", h: "100px", c: "red" }];
|
||||
rectangles.push({ w: "200px", h: "300px", c: "cyan" });
|
||||
const [rectanglesItems, setRectanglesItems] = useState([]);
|
||||
|
||||
const handleFormSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
rectangles.push({ w: width + "px", h: height + "px", c: "blue" });
|
||||
console.log(rectangles);
|
||||
setRectanglesItems([
|
||||
...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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user