75531


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

[code]

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

### 追記

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

[code]

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

### 追記2

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

[code]

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

＊＊呼び出し側**

[code]

    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
        }
      }
    }
    
[/code]


CC BY-SA 4.0
2021-04-27T05:19:57.597
75528
2021-04-27T07:09:45.987
2021-04-27T06:45:38.987
22565
22565
question
javascript reactjs typescript react-jsx next.js
TypeScript components内でmap()を使用するとエラーが出る。


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

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

  * `.map()` に渡すアロー関数で値を返してください
  * `key` prop を設定してください 
    * [リストと key – React#Key](https://ja.reactjs.org/docs/lists-and-keys.html#keys)

[code]

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

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

[code]

    export default function Topics({ topicList }: { topicList: string[] }) {
      // ReactElement内 (<> </> 内) にコードを書いているので、 {} が必要
      return (
        <>
          {topicList.map(topic => (<span key={topic}>{topic}</span>))}
        </>
      );
    }
    
[/code]


CC BY-SA 4.0
2021-04-27T06:41:21.457
75531
2021-04-27T07:09:45.987
2021-04-27T07:09:45.987
3068
3068
75528
answer