0

<span>タグに topic を代入して出力するコンポーネントを作成したいのですが、 (property) topicList: string[] ',' expected.ts(1005) と出て .map が使えないみたいな表示がされます。なぜこのようになるのか分からないです。コードを見て頂けないでしょうか?

//topicListには["javascript", "初心者", "作業ログ"]と文字列の配列が渡される予定です。
export default function Topics({ topicList }: { topicList: string[] }) {
  return ({
      topicList.map(topic => {
        <span >{topic}</span>
      })
    }
  )
}

追記

確か空のタグで囲ってないとダメだった気がしたので <> で囲ったけどエラーは改善されませんでした。
でもこれってコンポートだから呼び出し側でdivタグで囲まれていれば問題ない気がします。

export default function Topics({ topicList }: { topicList: string[] }) {
  return ({
    <>
      topicList.map(topic => {
        <span >{topic}</span>
      })
   </>
    }
  )
}

追記2

エラーは取れたのですが、使用してもサイト側で思い通りに表示されない。

export default function Topics({ topicList }: { topicList: string[] }) {
  return (
    <>
      {
        topicList.map(topic => {
          <span >{topic}</span>
        })
      }
    </>
  )
}

**呼び出し側**

import Head from 'next/head'
import { getPostsData } from '../lib/posts'
import { getSortedPostsData } from '../lib/posts'
import { GetStaticProps } from 'next'
import Link from 'next/link'
import { Article } from '../types/Article'
import Layout from '../components/layout'
import Date from '../components/date'
import Topics from '../components/topics'



const pattern = ["bg-blue", "bg-blue-light", "bg-gray", "bg-earth-light"]; 

function getColorClassFromIndex(index: number): string {
  return pattern[index % pattern.length];
}

export default function Home({ 
  sortedPostData
}: {
  sortedPostData: Article[]
}) {
  return (
    <Layout home>
      <div className="">
        <Head>
          <title>Hello</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <ul>
          {sortedPostData.map(({ id, title, date, topics }, index) => (
            <li className={"h-44 " + getColorClassFromIndex(index)} key={id}>
              <Link href={`/posts/${id}`}>
                {title}
              </Link>
              <br />
              <small>
                <Topics topicList={topics} />
                <Date dateString={date} />
              </small>
            </li>
          ))}
        </ul>
      </div>
    </Layout>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const allPostsData = await getPostsData()
  const sortedPostData = await getSortedPostsData(allPostsData)
  return {
    props: {
      sortedPostData
    }
  }
}

1 件の回答 1

0

{}が必要なのは、ReactElement 内でJavaScript(TypeScript)コードを記述する場合です。

function Topics() が返す値が ReactElement[] の場合、そもそも {} が不要ですので、以下の様に書いてください。

export default function Topics({ topicList }: { topicList: string[] }) {
  return topicList.map(topic => (<span key={topic}>{topic}</span>));
}

返す値が ReactElement の場合は、以下の様になります。

export default function Topics({ topicList }: { topicList: string[] }) {
  // ReactElement内 (<> </> 内) にコードを書いているので、 {} が必要
  return (
    <>
      {topicList.map(topic => (<span key={topic}>{topic}</span>))}
    </>
  );
}
9
  • 上記の ReactElementの方をコピペしたらちゃんと動作しました。
    – wataru
    Commented 2021年4月27日 6:49
  • この keyというのも設定しないとしっかりレンダーされないんですね。
    – wataru
    Commented 2021年4月27日 6:50
  • 表示されなかった理由は、先日の回答でも書いた通り .map()に渡していたアロー関数が (topic) => {}になっていてvoid(undefined)の配列が返っていたせいだと思います。 key が設定されていなくてもレンダリング自体はされますが、要素が追加削除されるケースなどにおいて問題となることがあります。リストと key – React#Key
    – harry0000
    Commented 2021年4月27日 6:52
  • .map(() => {}) これだと使い方として違うという事でしょうか?同じミスをすいません。
    – wataru
    Commented 2021年4月27日 7:01
  • .map(() => { return (value); }).map(() => (value)) で書いてください。思い切って今後 .map() に渡す関数で {} を使わない、のも良いかもしれません。
    – harry0000
    Commented 2021年4月27日 7:05

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。