React + TypeScriptにおけるmap関数の型付がわからずハマっています

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
React + Redux + TypeScriptで文字型配列を受け渡し、map関数で一つずつレンダリングする部分を作成しています。
map関数で一つずつ子コンポーネントを吐くコードにしているのですがmap関数の型がないと怒られます。しかしどのように型をつければ良いのか調べてもわからず質問いたしました。

発生している問題・エラーメッセージ

ここのところで

{filters.map(i => (
        <FilterButton filter={i} />
      ))}

以下のメッセージが表示されます

Property 'map' does not exist on type 'PropsWithChildren<FilterProps>'

該当のソースコード

import React, { FC } from 'react'
import styled from 'styled-components'

import FilterButton from '../atoms/FilterButton'

const FilterWrap = styled.div``

interface FilterProps {
  filters: string[]
}

const FilterWrapper: FC<FilterProps> = ( filters ) => {
  return (
    <FilterWrap>
      {filters.map(i => (
        <FilterButton filter={i} />
      ))}
    </FilterWrap>
  )
}

export default FilterWrapper

試したこと

別のinterfaceを作ってfilter.map<hogeHoge>(以下略)のようにしようと思いましたが、子コンポーネントのtypeはどう扱えば良いのかわかりませんでした。

Answer 1

結論から言うと、

const FilterWrapper: FC<FilterProps> = ( filters ) => {

を

const FilterWrapper: FC<FilterProps> = ( { filters } ) => {

に書き換えれば動くと思います。

React の FC<FilterProps> という型は (props: FilterProps) => JSX.Element です。（厳密には戻り値がちょっと違いますが…。）
つまり、FilterProps 型の引数を受け取って、仮想 DOM 要素を返す関数になります。
で、元の書き方だと FilterWrapper の引数 filters は FilterProps の中の filters ではなく、FilterProps 全体（普通は props という名前にする）を指し、配列ではないので map は使えません。
FilterProps の中の filters だけを受け取りたい場合は、引数を { ... } で括って（これをオブジェクトの分割代入と言う）書くことができます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

Comments

[moimoi_sushi]

ありがとうございます。今まで悩んでいたのが馬鹿らしかったかのように即動きました！（他のエラーもいくつかあったのですが同様のところでつまづいていました）
もともと{}は付けていたのですがTypeScript型を初見で導入する過程でとにかく変えられる場所を変えていった結果としてなぜか消し去っていました...

オブジェクトの分割代入という概念、学習不足でしたので頭に叩き込んでおきます
ありがとうございました！！