質問編集履歴

5

文章

2022/06/24 00:58

投稿

anko0626
anko0626

score0

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
  タイトルとテキストの入力を行い、送信ボタンを押すと配列の中の値が消えてしまい、画面に表示されません。
3
3
  以下、問題のあるプログラムです
4
4
 
5
- /*import './App.css';
5
+ import './App.css';
6
6
  import { useState } from 'react';
7
7
 
8
8
  const getKey = () => Math.random().toString(32).substring(2);
@@ -25,7 +25,7 @@
25
25
  <h2>メモアプリ</h2>
26
26
 
27
27
  <Form onAdd={handleAdd}/>{console.log(items)}
28
- <List item={items} /> //こちらのitemsが表示されないです
28
+ <List item={items} /> 
29
29
  </div>
30
30
  </div>
31
31
 
@@ -70,7 +70,6 @@
70
70
  )};
71
71
 
72
72
  export default App2;
73
- */
74
73
 
75
74
  質問の内容が分かりづらくてすみません、また、reactでのアプリ作成は初めてなのでプログラムが大きく間違っていたら大変申し訳ないです、、、
76
75
  もし原因などお分かりでしたらご教授いただけますと幸いです。

4

文章

2022/06/24 00:57

投稿

anko0626
anko0626

score0

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
  タイトルとテキストの入力を行い、送信ボタンを押すと配列の中の値が消えてしまい、画面に表示されません。
3
3
  以下、問題のあるプログラムです
4
4
 
5
- **import './App.css';
5
+ /*import './App.css';
6
6
  import { useState } from 'react';
7
7
 
8
8
  const getKey = () => Math.random().toString(32).substring(2);
@@ -69,7 +69,8 @@
69
69
  </>
70
70
  )};
71
71
 
72
- export default App2;**
72
+ export default App2;
73
+ */
73
74
 
74
75
  質問の内容が分かりづらくてすみません、また、reactでのアプリ作成は初めてなのでプログラムが大きく間違っていたら大変申し訳ないです、、、
75
76
  もし原因などお分かりでしたらご教授いただけますと幸いです。

3

文章

2022/06/24 00:57

投稿

anko0626
anko0626

score0

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
  タイトルとテキストの入力を行い、送信ボタンを押すと配列の中の値が消えてしまい、画面に表示されません。
3
3
  以下、問題のあるプログラムです
4
4
 
5
- import './App.css';
5
+ **import './App.css';
6
6
  import { useState } from 'react';
7
7
 
8
8
  const getKey = () => Math.random().toString(32).substring(2);
@@ -25,7 +25,7 @@
25
25
  <h2>メモアプリ</h2>
26
26
 
27
27
  <Form onAdd={handleAdd}/>{console.log(items)}
28
- <List item={items} /> ** //こちらのitemsが表示されないです**
28
+ <List item={items} /> //こちらのitemsが表示されないです
29
29
  </div>
30
30
  </div>
31
31
 
@@ -69,7 +69,7 @@
69
69
  </>
70
70
  )};
71
71
 
72
- export default App2;
72
+ export default App2;**
73
73
 
74
74
  質問の内容が分かりづらくてすみません、また、reactでのアプリ作成は初めてなのでプログラムが大きく間違っていたら大変申し訳ないです、、、
75
75
  もし原因などお分かりでしたらご教授いただけますと幸いです。

2

文章

2022/06/24 00:56

投稿

anko0626
anko0626

score0

test CHANGED
File without changes
test CHANGED
@@ -2,10 +2,74 @@
2
2
  タイトルとテキストの入力を行い、送信ボタンを押すと配列の中の値が消えてしまい、画面に表示されません。
3
3
  以下、問題のあるプログラムです
4
4
 
5
+ import './App.css';
6
+ import { useState } from 'react';
5
7
 
8
+ const getKey = () => Math.random().toString(32).substring(2);
9
+
10
+ function App2() {
11
+ const [items, setItems] = useState([]);
12
+
13
+ const handleAdd = (title,text) => {
14
+ setItems([...items, { key: getKey(),title, text}]);
15
+ };
16
+
17
+
18
+ return (
19
+ <div>
20
+ <meta charSet="UTF-8" />
21
+ <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
22
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
23
+ <title>メモ</title>
24
+ <div className="board-section">
25
+ <h2>メモアプリ</h2>
26
+
27
+ <Form onAdd={handleAdd}/>{console.log(items)}
28
+ <List item={items} /> ** //こちらのitemsが表示されないです**
29
+ </div>
30
+ </div>
31
+
32
+ );
33
+ }
34
+
35
+ function Form({ onAdd }){
36
+ const [title,setTitle]=useState('');
37
+ const [text,setText]=useState('');
38
+ const handleChange =(e)=>setTitle(e.target.value);
39
+ const handleText = (e) =>setText(e.target.value);
40
+ const handleKeyDown = () =>{
41
+ onAdd(title,text);
42
+ setTitle('');
43
+ setText('');
44
+ };
45
+
46
+ return(
47
+ <>
48
+ <form className="form-section">
49
+ {console.log("タイトル"+title)}
50
+ <p>タイトル</p>
51
+ <input type="text" id="inputTitle" value={title} placeholder='タイトルを入力してください' onChange={handleChange}/>
52
+ <p>内容</p>
53
+ <textarea id="inputContent" value={text} placeholder="テキストを入力してください" rows={10} cols={30} onChange={handleText}/>
54
+ <br />
55
+ <button id="submitButton" type="submit" onClick={handleKeyDown}>送信</button>
56
+ </form>
57
+ </>
58
+ )};
59
+
60
+ function List({ item }){
61
+ return(
62
+ <>
63
+ <div className="thread-section">
64
+ <div className="single-thread">
65
+ <h3>{item.title}</h3>
66
+ <p>{item.text}</p>
67
+ </div>
68
+ </div>
69
+ </>
70
+ )};
6
71
 
7
72
  export default App2;
8
73
 
9
-
10
74
  質問の内容が分かりづらくてすみません、また、reactでのアプリ作成は初めてなのでプログラムが大きく間違っていたら大変申し訳ないです、、、
11
75
  もし原因などお分かりでしたらご教授いただけますと幸いです。

1

文章

2022/06/24 00:53

投稿

anko0626
anko0626

score0

test CHANGED
File without changes
test CHANGED
@@ -2,73 +2,7 @@
2
2
  タイトルとテキストの入力を行い、送信ボタンを押すと配列の中の値が消えてしまい、画面に表示されません。
3
3
  以下、問題のあるプログラムです
4
4
 
5
- import './App.css';
6
- import { useState } from 'react';
7
5
 
8
- const getKey = () => Math.random().toString(32).substring(2);
9
-
10
- function App2() {
11
- const [items, setItems] = useState([]);
12
-
13
- const handleAdd = (title,text) => {
14
- setItems([...items, { key: getKey(),title, text}]);
15
- };
16
-
17
-
18
- return (
19
- <div>
20
- <meta charSet="UTF-8" />
21
- <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
22
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
23
- <title>メモ</title>
24
- <div className="board-section">
25
- <h2>メモアプリ</h2>
26
-
27
- <Form onAdd={handleAdd}/>
28
- <List item={items} />  **//こちらのitemsが表示されないです**
29
- </div>
30
- </div>
31
-
32
- );
33
- }
34
-
35
- function Form({ onAdd }){
36
- const [title,setTitle]=useState('');
37
- const [text,setText]=useState('');
38
- const handleChange =(e)=>setTitle(e.target.value);
39
- const handleText = (e) =>setText(e.target.value);
40
- const handleKeyDown = () =>{
41
- onAdd(title,text);
42
- setTitle('');
43
- setText('');
44
- };
45
-
46
- return(
47
- <>
48
- <form className="form-section">
49
- {console.log("タイトル"+title)}
50
- <p>タイトル</p>
51
- <input type="text" id="inputTitle" value={title} placeholder='タイトルを入力してください' onChange={handleChange}/>
52
- <p>内容</p>
53
- <textarea id="inputContent" value={text} placeholder="テキストを入力してください" rows={10} cols={30} onChange={handleText}/>
54
- <br />
55
- <button id="submitButton" type="submit" onClick={handleKeyDown}>送信</button>
56
- </form>
57
- </>
58
- )};
59
-
60
- **//こちらのコンポーネントの値が反映されていないです**
61
- function List({ item }){
62
- return(
63
- <>
64
- <div className="thread-section">
65
- <div className="single-thread">
66
- <h3>{item.title}</h3> 
67
- <p>{item.text}</p>
68
- </div>
69
- </div>
70
- </>
71
- )};
72
6
 
73
7
  export default App2;
74
8