访问对象内部的数组

Question

I have a functional component that renders out the object values

    const MovieItemDetails = (props) => {
  return <div className='item-details'>
    <div>
      <img key={props.movieDetails.id} src={`https://image.tmdb.org/t/p/w1280${props.movieDetails.backdrop_path}`} alt={props.movieDetails.title} className='header-item-image' />
      <a href='#t' className='header-item-name'>{props.movieDetails.title}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${props.movieDetails.poster_path}`} alt={props.movieDetails.title} className='header-item-poster' />
      <h2>{props.movieDetails.genres[0].name}</h2>
    </div>
  </div>
}

I'm trying to access the nested array as seen in the image below

What I want is the genre name of the first array, I have tried { props.movieDetails.genres[0].name}

but I get 'TypeError: Cannot read property '0' of undefined'

EDIT: full Object

Answer 1

Instead of referring the nested array time and again, better to extract it in const at the start and check for its value before rendering. Please see below:

const MovieItemDetails = (props) => {
      const {movieDetails} = {...props};
      return (movieDetails && movieDetails.genres ? <div className='item-details'>
        <div>
          <img key={movieDetails.id} src={`https://image.tmdb.org/t/p/w1280${movieDetails.backdrop_path}`} alt={movieDetails.title} className='header-item-image' />
          <a href='#t' className='header-item-name'>{movieDetails.title}</a>
          <img src={`https://image.tmdb.org/t/p/w185/${movieDetails.poster_path}`} alt={movieDetails.title} className='header-item-poster' />
          <h2>{movieDetails.genres[0].name}</h2>
        </div>
      </div> : null);
}

Answer 2

I would rather suggest to call it in right way. Please have a look at the following code.

import React from 'react'
import Header from './Header'
import Main from './Main'
const MovieItemDetails = (props) => {
  return <div className='item-details'>
    <div>
     <img key={props.movieDetails.id} src= {`https://image.tmdb.org/t/p/w1280${props.movieDetails.backdrop_path}`} alt= {props.movieDetails.title} className='header-item-image' />
     <a href='#t' className='header-item-name'>{props.movieDetails.title}</a>
     <img src={`https://image.tmdb.org/t/p/w185/${props.movieDetails.poster_path}`} alt={props.movieDetails.title} className='header-item-poster' />
     <h2>{props.movieDetails.genres[0].name}</h2>
   </div>
  </div>
}
const movieDetails = {
  id: 1,
  title: 'Movie',
  genres : [
    {id: 0, name : 'Songs'}
  ]
}
const App = () => (
  <div>
    <MovieItemDetails movieDetails={movieDetails}  />
    {MovieItemDetails({movieDetails})}
 </div>
)

export default App