質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

GatsbyJS(ReactJS)で重複している要素を除外して表示させたい。

1042limit
1042limit

総合スコア0

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2回答

0評価

0クリップ

25閲覧

投稿2019/01/10 07:47

お世話になります。
GatsbyJSでカテゴリー一覧を表示するコンポーネントを作成しています。
しかし、重複して表示されてしまい上手くいきません。
ご教授いただければ幸いです。

import React from "react"; import { Link } from "gatsby"; import "./Category.css"; class Category extends React.Component { getPostList() { let postList = []; this.props.postEdges.forEach(postEdge => { postList.push({ category: postEdge.node.frontmatter.category,     categoryslug: postEdge.node.frontmatter.categoryslug, }); }); return postList; } render() { const postList = this.getPostList().filter(function (category, index, self) { return self.indexOf(category) === index; }); return ( <div className="grid"> postList.map(post => ( <div className="item"> <p>{post.category}</p> </div> ))} </div> ); } } export default Category;

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

jun68ykt
jun68ykt

2019/01/10 12:46

こんにちは。 this\.props\.postEdges で渡されてくる配列の各要素がどのような構造になっているのかを知りたいので、postEdges のサンプルを質問に追記して頂ければと思います。
1042limit
1042limit

2019/01/10 15:03

お世話になります。 GraphiQLのデータを提示させていただきます。 { "data": { "allMarkdownRemark": { "edges": \[ { "node": { "fields": { "slug": "/the-butterfly-of-the-edge", "date": "2017-03-19T15:00:00\.000Z" }, "excerpt": "Hanc indeploratum seram Amphitryoniadae tremulis pauperque manum Cognoscenti audeat ulterius sublimia terga potiorque saxo あいうえお\\nLorem…", "timeToRead": 1, "frontmatter": { "title": "The Butterfly of the Edge", "tags": \[ "programming", "more tags", "testing", "another one", "stuff", "other" \], "cover": "https://unsplash\.it/1152/300/\?random\?TheButterflyoftheEdge", "date": "17/03/2017", "category": "tech", "categoryslug": "tech" } } }, { "node": { "fields": { "slug": "/the-fairys-witches", "date": "2002-04-19T15:00:00\.000Z" }, "excerpt": "Eram mora tuas in inter ferens caterva Ait oculos Lorem markdownum\. Dedit caput, saxa lenis adhibere negarunt substiterat et ab\\ntestes…", "timeToRead": 1, "frontmatter": { "title": "The Fairy's Witches", "tags": null, "cover": "https://unsplash\.it/1152/300/\?random\?FaityWitch", "date": "02/04/2017", "category": "something", "categoryslug": "something" } } }, { "node": { "fields": { "slug": "/random-project-4-with-super-long-title-phase-one", "date": "2002-03-19T15:00:00\.000Z" }, "excerpt": "Artificem honorati ore temperat Lycus quam antiquum Mendaci pinu ipsi nunc Lorem markdownum supplex\. Care ferre nos praemia detestatur…", "timeToRead": 2, "frontmatter": { "title": "Random project 4 With Super Long Title Phase One", "tags": \[ "say hi" \], "cover": "https://unsplash\.it/1152/300/\?random\?SuperLong", "date": "02/03/2017", "category": "random", "categoryslug": "random" } } }, { "node": { "fields": { "slug": "/angels-of-mist", "date": "2001-03-19T15:00:00\.000Z" }, "excerpt": "Ab dicemur cura Mane oscula anxia Lorem markdownum alius, non voluntas supremaque : canes ager cingere quis;\\nrerum\? Nunc nec ferunt verbis…", "timeToRead": 2, "frontmatter": { "title": "Angels of Mist", "tags": \[ "cheese", "other" \], "cover": "https://unsplash\.it/400/300/\?random\?AngelsofMist", "date": "01/03/2017", "category": "test3", "categoryslug": "test3" } } }, { "node": { "fields": { "slug": "/big-sample-test", "date": "2001-03-19T15:00:00\.000Z" }, "excerpt": "NOTE: This \\"post\\" is based on Markdown Cheatsheet and is meant to test styling of Markdown generated documents\. This is intended as a…", "timeToRead": 8, "frontmatter": { "title": "Big Test", "tags": \[ "test", "huge" \], "cover": "https://unsplash\.it/400/300/\?random\?BigTest", "date": "01/03/2018", "category": "moar", "categoryslug": "moar" } } }, { "node": { "fields": { "slug": "/birch-in-the-roses", "date": "2001-03-19T15:00:00\.000Z" }, "excerpt": "Domos primus caelum taedia Accipit alto fecerat mutato centauri haerent dominoque Sicyonius color Publica animalia suoque sub Stupet eiusdem…", "timeToRead": 2, "frontmatter": { "title": "Birch in the Roses", "tags": \[ "tag" \], "cover": "\.\./static/4b00837366fb63a52fb41969a89d6676/ec749/sutaba-1\.jpg", "date": "01/03/2017", "category": "tech", "categoryslug": "tech" } } }, { "node": { "fields": { "slug": "/the-fallen-time", "date": "2001-02-19T15:00:00\.000Z" }, "excerpt": "Autolyci eminus retenta Hoc domum solitos veteremque nostrum Lorem markdownum huc suo ara, dubites celeri mihi bicolor\. Secuti non\? Suo opus…", "timeToRead": 2, "frontmatter": { "title": "The Fallen Time", "tags": \[ "test", "something", "tagging" \], "cover": "https://unsplash\.it/400/300/\?random\?TheFallenTime", "date": "01/02/2017", "category": "another one", "categoryslug": "anotherone" } } }, { "node": { "fields": { "slug": "/bold-mage", "date": "2001-01-19T15:00:00\.000Z" }, "excerpt": "Quanto et ius coniunctis urbes Sedisti civiliter Lorem markdownum Ixione palus semper peritura barbaque in aureus\\nobliquum erigitur…", "timeToRead": 2, "frontmatter": { "title": "Bold Mage", "tags": \[ "programming", "stuff", "other" \], "cover": "https://unsplash\.it/400/300/\?random\?BoldMage", "date": "01/01/2017", "category": "tech", "categoryslug": "tech" } } } \] } } }
jun68ykt
jun68ykt

2019/01/10 15:09

JSONのサンプル提示、ありがとうございます。categoryプロパティは文字列なので、私の回答のコードでそのままいけると思います。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。