Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1165377

Browse files
updated React Library Code Repo
1 parent 33f8678 commit 1165377

File tree

41 files changed

+2094
-287
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2094
-287
lines changed
File renamed without changes.
File renamed without changes.

‎REACT_RECAP/box-changes-show-div/package.json‎ renamed to ‎REACT_RECAP/box-challenge/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "box-changes-show-div",
2+
"name": "box-challenge",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
@@ -13,9 +13,9 @@
1313
"react-dom": "^18.2.0"
1414
},
1515
"devDependencies": {
16-
"@types/react": "^18.0.24",
17-
"@types/react-dom": "^18.0.8",
18-
"@vitejs/plugin-react": "^2.2.0",
19-
"vite": "^3.2.3"
16+
"@types/react": "^18.0.26",
17+
"@types/react-dom": "^18.0.9",
18+
"@vitejs/plugin-react": "^3.0.0",
19+
"vite": "^4.0.0"
2020
}
2121
}
File renamed without changes.
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.app-container{
2+
width: 450px;
3+
height: auto;
4+
background-color: black;
5+
padding: 12px;
6+
display: flex;
7+
align-items: center;
8+
flex-wrap: wrap;
9+
justify-content: center;
10+
border-radius: 9px;
11+
}
12+
.box-container{
13+
width: 90px;
14+
height: 90px;
15+
border: 1px solid gray;
16+
cursor: pointer;
17+
border-radius: 9px;
18+
margin: 3px;
19+
}
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from "react"
2+
import "./App.css"
3+
import Box from "./Box"
4+
import Boxdata from "./Boxdata"
5+
6+
export default function App() {
7+
8+
const [state, setState] = React.useState(Boxdata)
9+
10+
function toggle(id) {
11+
setState((prevstate) => {
12+
return(
13+
prevstate.map((stateData) =>{
14+
return stateData.id === id ? {...stateData, bool: !stateData.bool} : stateData
15+
})
16+
)
17+
})
18+
}
19+
// function toggle(id){ //practice purpose
20+
// setState((prevState) => {
21+
// return(
22+
// prevState.map((newdata) => {
23+
// return(
24+
// newdata.id === id ? {...newdata, bool: !newdata.bool} : newdata
25+
// )
26+
// })
27+
// )
28+
// })
29+
// }
30+
// function toggle(id) { //practice purpose
31+
// setState((prevstate) => {
32+
// return(
33+
// prevstate.map((previtem) => {
34+
// return(
35+
// previtem.id === id ? {...previtem, bool: !previtem.bool} : previtem
36+
// )
37+
// })
38+
// )
39+
// })
40+
// }
41+
const boxitem = state.map((boxdata) => {
42+
return(
43+
<Box
44+
key={boxdata.key}
45+
id={boxdata.id}
46+
status={boxdata.bool}
47+
toggle={() => toggle(boxdata.id)}
48+
/>
49+
)
50+
})
51+
52+
return(
53+
<div className="app-container">
54+
{boxitem}
55+
</div>
56+
)
57+
}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react"
2+
3+
export default function Box(props) {
4+
5+
const bgcolor ={ backgroundColor: props.status ? "rgb(145, 255, 182)" : "white"}
6+
return(
7+
<div style={bgcolor} className="box-container" onClick={props.toggle} >
8+
9+
</div>
10+
)
11+
}
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export default [
2+
{
3+
key: 10,
4+
id: 1,
5+
bool: true,
6+
},
7+
{
8+
key: 20,
9+
id: 2,
10+
bool: false,
11+
},
12+
{
13+
key: 30,
14+
id: 3,
15+
bool: true,
16+
},
17+
{
18+
key: 40,
19+
id: 4,
20+
bool: false,
21+
},
22+
{
23+
key: 50,
24+
id: 5,
25+
bool: true,
26+
},
27+
{
28+
key: 60,
29+
id: 6,
30+
bool: false,
31+
},
32+
{
33+
key: 70,
34+
id: 7,
35+
bool: true,
36+
},
37+
{
38+
key: 80,
39+
id: 8,
40+
bool: true,
41+
},
42+
];
Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎REACT_RECAP/box-changes-show-div/src/main.jsx‎ renamed to ‎REACT_RECAP/box-challenge/src/main.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,7 @@ import ReactDOM from "react-dom/client"
33
import App from "./App"
44

55
ReactDOM.createRoot(document.getElementById("root")).render(
6-
<App/>
7-
)
6+
<React.StrictMode>
7+
<App/>
8+
</React.StrictMode>
9+
)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /