<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
}
}
}