Reactで「Uncaught TypeError: ○○.map is not a function」が出たときの解決法

投稿日:2022/09/10 最終更新日:2022/09/10

Reactで「Uncaught TypeError: ○○.map is not a function」が出たときの解決法

原因

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の値を出力できましたので、解決です。