Movatterモバイル変換

[0]ホーム
URL:

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

Commite34120f

Browse files
added notes with UUID
1 parent23d1d30 commite34120f

File tree

6 files changed

+77
-17
lines changed

6 files changed

+77
-17
lines changed

‎package-lock.json‎

Lines changed: 37 additions & 6 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react-dom":"^18.2.0",
1515
"react-scripts":"5.0.1",
1616
"typescript":"^4.8.3",
17+
"uuid":"^9.0.0",
1718
"web-vitals":"^2.1.4"
1819
},
1920
"scripts": {
@@ -39,5 +40,8 @@
3940
"last 1 firefox version",
4041
"last 1 safari version"
4142
]
43+
},
44+
"devDependencies": {
45+
"@types/uuid":"^8.3.4"
4246
}
4347
}

‎src/App.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,19 @@ import Note from './components/note/note';
33
import{Notes}from'./components/note/data';
44
importAddNotefrom'./components/add-note/add-note';
55
import{useState}from'react';
6+
import{NoteType}from'./components/note/note-type';
67

78
functionApp(){
89

910
const[notes,setNotes]=useState(Notes);
11+
12+
constaddNote=(note:NoteType)=>{
13+
setNotes([note,...notes])
14+
}
1015
return(
1116
<divclassName="App">
1217
<h2>Notes App</h2>
13-
<AddNote></AddNote>
18+
<AddNoteaddNote={addNote}></AddNote>
1419
<div>
1520
{
1621
notes.map(

‎src/components/add-note/add-note.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
11
import{useState}from'react';
2+
import{NoteType}from'../note/note-type';
23
import'./add-note.css';
4+
import{v4asuuidv4}from'uuid';
35

4-
functionAddNote(){
6+
typeAddNoteProps={
7+
addNote :(note:NoteType)=>void
8+
}
9+
10+
functionAddNote(props:AddNoteProps){
511

612
const[text,setText]=useState("");
713
consthandleChange=(e:React.ChangeEvent<HTMLInputElement>)=>{
814
setText(e.target.value);
915
}
16+
17+
consthandleClick=(e:React.MouseEvent<HTMLButtonElement,MouseEvent>)=>{
18+
e.preventDefault();
19+
props.addNote({
20+
text,
21+
priority:'low',
22+
id:uuidv4()
23+
})
24+
}
1025

1126
return(
1227
<div>
1328
<formclassName="add-note">
1429
<inputtype="text"onChange={handleChange}/>
15-
<button>Add</button>
30+
<buttononClick={handleClick}>Add</button>
1631
</form>
1732
</div>
1833
)

‎src/components/note/data.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import{NoteProps}from'./note-type';
1+
import{NoteType}from'./note-type';
22

3-
exportconstNotes:NoteProps[]=[
3+
exportconstNotes:NoteType[]=[
44
{
5-
id:1,
5+
id:'1',
66
text:"This is note 1",
77
priority :"high"
88
},
99
{
10-
id:2,
10+
id:'2',
1111
text:"This is note 2",
1212
priority :"low"
1313
},
1414
{
15-
id:3,
15+
id:'3',
1616
text:"This is note 3",
1717
priority :"low"
1818
},
1919
{
20-
id:4,
20+
id:'4',
2121
text:"This is note 4",
2222
priority :"medium"
2323
},
2424
{
25-
id:5,
25+
id:'5',
2626
text:"This is note 5",
2727
priority :"medium"
2828
}

‎src/components/note/note-type.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
exporttypeNoteProps={
2-
id?:number,
32
text:string,
43
priority? :'high'|'medium'|'low'
4+
}
5+
6+
exporttypeNoteType={
7+
id:string,
8+
text:string,
9+
priority :'high'|'medium'|'low'
510
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp