Uncaught TypeError: Cannot read properties of undefined (reading 'map') エラー解決方法

Uncaught TypeError: Cannot read properties of undefined (reading 'map')の解決方法

エラー原因

• 画面表示をする側でコンポーネントに渡すpropsのプロパティ名とpropsを受け取る側（コンポーネントの記述をするファイル）のpropsのプロパティ名が違っていて正しくpropsのプロパティが参照できていなかったから。

• propsのプロパティ名が画面を表示する側ではrecordLiになっていてpropsを受け取るコンポーネント側ではRecordLiとなっていてプロパティ名の大文字・小文字が異なっていた。

問題のファイル

App.jsx

export const App = () =>{
const records = [
  { title: "勉強の記録1", time: 1},
  { title: "勉強の記録2", time: 3},
  { title: "勉強の記録3", time: 5}
];
  return (
    <>
    <h1>学習記録一覧</h1>
    <ListDisplay recordLi={records} />
    </>
  );
}

ListDisplay.jsx

export const ListDisplay = (props)=>{
    const {RecordLi} =props;
    
    return(
        <ul>
        {RecordLi.map((studyList)=>
        (
           <li key={studyList.time}>
            <p>{studyList.title}{studyList.time}時間</p>
            </li>
        )
       )}
         </ul>
    );
    }

修正後

App.jsx

export const App = () =>{
const records = [
  { title: "勉強の記録1", time: 1},
  { title: "勉強の記録2", time: 3},
  { title: "勉強の記録3", time: 5}
];
  return (
    <>
    <h1>学習記録一覧</h1>
    <ListDisplay recordLi={records} />
    </>
  );
}

ListDisplay.jsx

export const ListDisplay = (props)=>{
    const {recordLi} =props;
    
    return(
        <ul>
        {recordLi.map((studyList)=>
        (
           <li key={studyList.time}>
            <p>{studyList.title}{studyList.time}時間</p>
           </li>
        )
       )}
         </ul>
    );
}

今回の所感についてまとめ

• プロパティの参照エラーが出た際にはまずプロパティ名が間違っていないか、cosole.log等をしてプロパティが参照できているのかをまず最初に確認した方がよいと感じた。

• 変数名をキャメルケースで書く
  ⇒先頭大文字はクラスを表すものになるため

• propsのプロパティ名がrecordLiとなっているので分かりやすいrecordListとエラー解消後つけなおした