【React】TypeError: Cannot read properties of undefined (reading 'title')

Question

実現したいこと

配列の要素をブラウザに表示させたい

発生している問題・分からないこと

titleプロパティが未定義と認識されて、配列の情報が画面に反映できない

エラーメッセージ

Cannot read properties of undefined (reading 'title')
TypeError: Cannot read properties of undefined (reading 'title')
    at ForItem (http://localhost:3000/static/js/bundle.js:338:28)
    at react-stack-bottom-frame (http://localhost:3000/static/js/bundle.js:18249:18)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:9566:20)
    at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:10835:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:11453:16)
    at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:6794:14)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:14038:93)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:13932:38)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:13916:7)
    at performWorkOnRoot (http://localhost:3000/static/js/bundle.js:13677:42)

該当のソースコード

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import ForNest from './ForNest.js';
import books from './Books.js';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ForNest books={books} />
  </React.StrictMode>
)

reportWebVitals();

import ForItem from "./ForItem";

export default function ForNest({books}) {
  return (
    <dl>
      {books.map(element =>
        <ForItem books={element} key={element.isbn} />
      )}
    </dl>
  );
}

export default function ForItem({element}) {
  return (
    <>
      <dt>
        <a href={'https://wings.msn.to/books/${element.isbn}/${element.isbn}.jpg'}>
          {element.title}({element.price}円)
        </a>
      </dt>
      <dd>{element.summary}</dd>
    </>
  );
}

const books = [
  {
    isbn : "978-4-8156-1336-5",
    title : "これからはじめるJavascript",
    price : 3800,
    summary : "javascriptの構文・実務で使える知識について",
    download : true
  },

  {
    isbn : "988777",
    title : "Ruby on Rails",
    price : 3000,
    summary : "rubyとそのフレームワークの使用方法について解説",
    download : true
  }
];

export default books;

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ForItem.jsの{element.title}を削除すると、次はpriceプロパティが未定義と表示されます
Books.jsが正常に読み込まれていないと推測していますが、解決が出来ません。
解決策をご教示していただきたく思います。
よろしくお願いします。

補足

特になし

Answer 1

<ForItem books={element}と渡す以上、受け取るForItemの側でもbooksという名前で受け取る必要があります。elementには何も来ない（のでundefined値となる）です。

Comments

[maisumakun]

逆に、渡す側を<ForItem element={element}とするほうが妥当かもしれないです。

[kosuke05]

maisumakun様

ご回答頂き有難うございます。
ご教示頂いた内容で正常に表示できました。
ベストアンサーとさせて頂きます。