[React] Cannot read property 'hotelName' of undefined.　mapメソッドを使った繰り返し構文が上手く行かない...

前提・実現したいこと

React.jsの開発環境でWebAPIの学習のため楽天トラベルAPIのサイトからjson形式をコピペしローカル環境にて試行錯誤しています。

そしてJSONファイルの中にあるhotels[0].hotel.hotelBasicInfo.hotelNameを繰り返すためmapメソッドを使い繰り返し構文を書きました。

しかし下記エラーメッセージのようにhotelNameのプロパティが空っぽと表示されてしまいます。

おそらく繰り返し構文が悪いと考えているのですが自力では解明できませんでした。そのためテラテイルのエンジニアの方のご意見を頂戴したく投稿させて頂きました。ご教授よろしくお願いいたします。

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

TypeError: Cannot read property 'hotelName' of undefined

該当のソースコード

React
1
2import data from '../data/vacanthotelsearch.json'
3
4export default () => {
5
6     return (
7
8          {data.hotels[0].hotel && data.hotels[0].hotel.map(room =>
9              <Col
10                   key={room.hotelBasicInfo.hotelName}
11              >
12                   -省略-
13              </Col>
14          )}

json
1{
2    "pagingInfo": {
3      "recordCount": 28,
4      "pageCount": 1,
5      "page": 1,
6      "first": 1,
7      "last": 28
8    },
9    "hotels": [
10      {
11        "hotel": [
12          {
13            "hotelBasicInfo": {
14              "hotelNo": 130702,
15              "hotelName": "京都嵐山温泉　花伝抄",
16
17　　　　　　　　　　　　　　　　-以下省略-