原因

jsxにてmap関数でループさせたいとき、オブジェクトリストはそのまま使用することは出来ません。

例えば、以下のようにTestコンポーネントでは親コンポーネントからpropsでlistsのデータを受け取り、map関数でlistとして引数を設定して表示させれば問題ないはずです。

import React from 'react

const Test = (props) => {
 return (
  <ul>
   { props.lists.map((list) => {
     <li>{ list }</li>
   ))}
  </ul>
 )
}

export default Test

しかし、「Uncaught TypeError: ○○.map is not a function」がエラー出力された場合はループさせる要素が正しく指定されていないためエラーが出てしまいます。

解決法

Object.keys()もしくはObject.values()を使用する

私の場合はvalueをループ表示させたかったのでObject.values()を以下のように反映しました。

修正部分は6行目です。

import React from 'react

const Test = (props) => {
 return (
  <ul>
   { Object.values(props.lists).map((list) => {
     <li>{ list }</li>
   ))}
  </ul>
 )
}

export default Test

これで問題なくpropsの値を出力できましたので、解決です。

関連記事:

TS2305: Module ‘”react-router-dom”‘ has no exported member ‘RouteComponentProps’.が表示された時の解決方法 Reactで「Warning: Each child in a list should have a unique “key” prop.」が出た時の解決法 WebページでJavaScriptが動かない場合の解決法 remove_filterでpタグを削除出来ない場合の解決法