質問編集履歴

1

最初の投稿にコードを追記編集しました。

2022/11/20 02:22

投稿

Umesh
Umesh

スコア1

test CHANGED
File without changes
test CHANGED
@@ -34,3 +34,137 @@
34
34
  ### 補足情報(FW/ツールのバージョンなど)
35
35
  必要があればライブラリ等のバージョンも調べます。よろしくお願いします。
36
36
 
37
+
38
+ ### コード抜粋(追記)
39
+ <Child.js(一部抜粋)>
40
+ ```
41
+ const getTagMenu = props.tags.map((data, index) => {
42
+ return (
43
+ <React.Fragment key={index}>
44
+ <li className="list-inline-item">
45
+ <Link to="#" onClick={e => props.setTag(e.target.textContent)} className="badge bg-light font-size-12 mt-2">
46
+ {data}
47
+ </Link>
48
+ </li>
49
+ </React.Fragment>
50
+ )
51
+ });
52
+
53
+ return (
54
+ <React.Fragment>
55
+ <input
56
+ type="text"
57
+ id="search"
58
+ className="form-control rounded bg-light border-light"
59
+ placeholder="キーワードを入力"
60
+ onChange={e => props.setKeyword(e.target.value)}
61
+ />
62
+
63
+ <div>
64
+ <p className="text-muted mb-1"><strong>タグ</strong></p>
65
+
66
+ <ul className="list-inline widget-tag">
67
+ {getTagMenu}
68
+ </ul>
69
+ </div>
70
+
71
+ </React.Fragment>
72
+ )
73
+ ```
74
+
75
+ <Parent.js(一部抜粋)>
76
+ ```
77
+ const [keyword, setKeyword] = useState("");
78
+ const [tag, setTag] = useState("");
79
+
80
+ const filterSearchWord = (blog) => {
81
+ return (blog.text.toLowerCase().indexOf(keyword.toLowerCase()) > -1) || (blog.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1);
82
+ };
83
+
84
+ const filterTag = (blog) => {
85
+ return (blog.tags.indexOf(tag) > -1);
86
+ };
87
+
88
+ const filterMulti = (blog) => {
89
+ return filterTag(blog) || filterSearchWord(blog);
90
+ };
91
+
92
+ const getBlog = (data) => {
93
+ data = data.filter(
94
+ (blog) => {
95
+ return filterMulti(blog);
96
+ });
97
+ data.sort();
98
+ const prefix = '../../';
99
+ return data.map((blog, index) => {
100
+ return (
101
+ <React.Fragment key={index}>
102
+ <div>
103
+ <h5>
104
+ <Link to="blog-details" className="text-dark">
105
+ {blog.title}
106
+ </Link>
107
+ </h5>
108
+ <p className="text-muted">{blog.shortInsertTime}</p>
109
+
110
+ <div className="position-relative mb-3">
111
+ <img src={prefix + blog.image} alt="" className="img-thumbnail" />
112
+ </div>
113
+
114
+ <ul className="list-inline">
115
+ <li className="list-inline-item mr-3">
116
+ <Link to="#" className="text-muted">
117
+ <i className="bx bx-comment-dots align-middle text-muted me-1"></i>{" "}
118
+ {blog.comment} Comments
119
+ </Link>
120
+ </li>
121
+ {getTags((blog.tags).split("&"))}
122
+ </ul>
123
+ <p>
124
+ {blog.text}
125
+ </p>
126
+
127
+ <div>
128
+ <Link to="#" className="text-primary">
129
+ Read more <i className="mdi mdi-arrow-right"></i>
130
+ </Link>
131
+ </div>
132
+ </div>
133
+
134
+ <hr className="my-5" />
135
+ </React.Fragment>
136
+ )
137
+ })
138
+ }
139
+
140
+ return (
141
+ <React.Fragment>
142
+ <FrontMenu />
143
+ <div className="page-content">
144
+ <MetaTags>
145
+ <title>タイトル(仮)</title>
146
+ </MetaTags>
147
+ <Container fluid>
148
+ <Row>
149
+ <BlogList
150
+ blog = {getBlog({activitylog}.activitylog)}
151
+ btnprimary = {btnprimary}
152
+ page = {page}
153
+ step = {step}
154
+ activeTab = {activeTab}
155
+ setPage = {setPage}
156
+ setStep = {setStep}
157
+ setBtnprimary = {setBtnprimary}
158
+ />
159
+ <RightBar
160
+ setKeyword = {setKeyword}
161
+ setTag = {setTag}
162
+ tags = {getAllTags}
163
+ />
164
+ </Row>
165
+ </Container>
166
+ </div>
167
+ </React.Fragment>
168
+ )
169
+ ```
170
+