Возникли проблемы с доступом к информации от объекта, чтобы передать в качестве опоры

Question

Я пытаюсь передать информацию в свой реквизит сведений о фильме (в частности, название фильма), это объект (закомментированный в моем коде для справки, но на самом деле это часть другого файла, в котором я не получаю ошибок импорта) :

--- файл TMDB.js ---

`// const TMDB = {
//   api_key: 'f------',
//   films: [
//     {
//       "id": 346364,
//         "title": "It",
//         "poster_path": "/9E2y5Q7WlCVNEhP5GiVTjhEhx1o.jpg",
//         "backdrop_path": "/tcheoA2nPATCm2vvXw2hVQoaEFD.jpg",
//         "overview": "In a small town in Maine, seven children known as The Losers Club come face to face with life problems, bullies and a monster that takes the shape of a clown called Pennywise.",`

в конце файла я написал выражение экспорта по умолчанию

Это ошибка, которую я получаю:

    "TypeError: Cannot read property 'title' of undefined" 

Это файл, в котором я пытаюсь получить название объекта для отображения - что мне не хватает?:

--- файл FilmListing.js

import React from 'react'
import ReactDOM from 'react-dom'
import FilmDetails from './../FilmDetails/FilmDetails.js'
import { TMDB } from '../../TMDB.js'

class FilmListing extends React.Component {
  constructor(props) {
    super(props);
  }
render() {
    return(
      <div className="film-list">
          <h1 className="section-title">FILMS</h1>
          <p> <FilmDetails/> </p>
          <p film = {TMDB.props.title}> {this.film.title} </p>
      </div>
    )
  }
}

edit- я пробовал {this.props.films} {this.props.TMDB.title} {this.props.TMDB.films.title}

Я предполагаю, что должен получить доступ к заголовку как части массива или чего-то еще (есть несколько других записей, я просто пытаюсь отобразить один объект)

Answer 1

Я понял, что мне нужно вернуться и посмотреть на структуру объекта, чтобы узнать, как я должен был его правильно назвать.

Мое приложение теперь отображается так (захватывая все названия фильмов вместо одного)

render() {
    return(
      <div className="film-list">
          <h1 className="section-title">FILMS</h1>
          <p> <FilmDetails/> </p>
          <p> {TMDB.films.map((film , index)=> {
            return (
          <div>
            <h2>
              {film.release_date}
            </h2>
            <p>
              {film.title} <br/>
              {film.id}
            </p>
          </div>
           )
          })
          } </p>
      </div>
    )
  }
}