title: Find specific data from object using React
body: <p>so im using fetch to get an object which has film data, how would i get specific data from that object? I have added an example of one of the object which i am using and I can set thing such as the name, genre, cast, trailers, recommendations etc and then map those but what i'm having trouble with is getting the certification as it an array called results. I have got as far as <code>release_dates.results</code> but after that i can't get it to specify 'GB' and then certification.</p>
  <pre><code>Object
    adult: false
    backdrop_path: &quot;/1Rr5SrvHxMXHu5RjKpaMba8VTzi.jpg&quot;
    belongs_to_collection: {id: 531241, name: 'Spider-Man (Avengers) Collection', poster_path: '/nogV4th2P5QWYvQIMiWHj4CFLU9.jpg', backdrop_path: '/AvnqpRwlEaYNVL6wzC4RN94EdSd.jpg'}
    budget: 200000000
    credits: {cast: Array(59), crew: Array(97)}
    genres: (3) [{…}, {…}, {…}]
    homepage: &quot;https://www.spidermannowayhome.movie&quot;
    id: 634649
    imdb_id: &quot;tt10872600&quot;
    original_language: &quot;en&quot;
    original_title: &quot;Spider-Man: No Way Home&quot;
    overview: &quot;Peter Parker is unmasked and no longer able to separate his normal life from the high-stakes of being a super-hero. When he asks for help from Doctor Strange the stakes become even more dangerous, forcing him to discover what it truly means to be Spider-Man.&quot;
    popularity: 7811.558
    poster_path: &quot;/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg&quot;
    production_companies: (3) [{…}, {…}, {…}]
    production_countries: [{…}]
    recommendations: {page: 1, results: Array(21), total_pages: 2, total_results: 40}
    release_date: &quot;2021-12-15&quot;
    release_dates:
      results: Array(35)
      0: {iso_3166_1: 'DE', release_dates: Array(2)}
      1: {iso_3166_1: 'UA', release_dates: Array(1)}
      2: {iso_3166_1: 'SK', release_dates: Array(1)}
      3: {iso_3166_1: 'MX', release_dates: Array(1)}
      4: {iso_3166_1: 'AU', release_dates: Array(1)}
      5: {iso_3166_1: 'TR', release_dates: Array(1)}
      6: {iso_3166_1: 'HU', release_dates: Array(2)}
      7:
        iso_3166_1: &quot;GB&quot;
        release_dates: Array(1)
        0:
        certification: &quot;12A&quot;
        iso_639_1: null
        note: &quot;&quot;
        release_date: &quot;2021-12-15T00:00:00.000Z&quot;
        type: 3
        [[Prototype]]: Object
        length: 1
        [[Prototype]]: Array(0)
        [[Prototype]]: Object
      8: {iso_3166_1: 'IT', release_dates: Array(1)}
      9: {iso_3166_1: 'AR', release_dates: Array(1)}
      10: {iso_3166_1: 'PE', release_dates: Array(1)}
      11: {iso_3166_1: 'NZ', release_dates: Array(1)}
      12: {iso_3166_1: 'IN', release_dates: Array(1)}
      13: {iso_3166_1: 'FI', release_dates: Array(1)}
      14: {iso_3166_1: 'CA', release_dates: Array(1)}
      15: {iso_3166_1: 'RU', release_dates: Array(1)}
      16: {iso_3166_1: 'ES', release_dates: Array(1)}
      17: {iso_3166_1: 'PH', release_dates: Array(1)}
      18: {iso_3166_1: 'PL', release_dates: Array(1)}
      19: {iso_3166_1: 'CZ', release_dates: Array(1)}
      20: {iso_3166_1: 'SG', release_dates: Array(1)}
      21: {iso_3166_1: 'GR', release_dates: Array(1)}
      22: {iso_3166_1: 'TH', release_dates: Array(1)}
      23: {iso_3166_1: 'HK', release_dates: Array(1)}
      24: {iso_3166_1: 'JP', release_dates: Array(1)}
      25: {iso_3166_1: 'IE', release_dates: Array(1)}
      26: {iso_3166_1: 'KR', release_dates: Array(1)}
      27: {iso_3166_1: 'RO', release_dates: Array(1)}
      28: {iso_3166_1: 'BR', release_dates: Array(2)}
      29: {iso_3166_1: 'US', release_dates: Array(2)}
      30: {iso_3166_1: 'TW', release_dates: Array(1)}
      31: {iso_3166_1: 'SE', release_dates: Array(1)}
      32: {iso_3166_1: 'NL', release_dates: Array(1)}
      33: {iso_3166_1: 'FR', release_dates: Array(2)}
      34: {iso_3166_1: 'CH', release_dates: Array(1)}
      length: 35
      [[Prototype]]: Array(0)
      [[Prototype]]: Object
    revenue: 1386428198
    runtime: 148
    spoken_languages: (2) [{…}, {…}]
    status: &quot;Released&quot;
    tagline: &quot;The Multiverse unleashed.&quot;
    title: &quot;Spider-Man: No Way Home&quot;
    video: false
    videos: {results: Array(21)}
    vote_average: 8.4
    vote_count: 3610
  
  </code></pre>
  <pre><code>import React, {useState, useEffect} from 'react'
  import { useLocation } from 'react-router';
  import { Nav} from 'react-bootstrap';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import { faStar, faPlay, faHeart, faShare} from '@fortawesome/free-solid-svg-icons'
  import {Helmet} from &quot;react-helmet&quot;;
  import { ScrollCard } from './ScrollCard';
  
  import { Alert } from 'react-bootstrap';
  import { NavLink } from 'react-router-dom';
  
  export const FilmPage = () =&gt; {
      const [details, setDetails] = useState([]);
      const [genres, setGenres] = useState([]);
      const [cast, setCast] = useState([]);
      const [trailer, setTrailer] = useState();
      const [recommendations, setRecommendations] = useState([]);
      const [watch, setWatch] = useState([]);
      const location = useLocation();    
  
      
      useEffect( () =&gt; { 
          fetch(`https://api.themoviedb.org/3/movie/${location.state}?api_key=${process.env.REACT_APP_TMDB_KEY}&amp;language=en-US&amp;append_to_response=release_dates,videos,credits,recommendations&amp;region=GB`)
          .then((res) =&gt; res.json())
          .then((data) =&gt; {
              if (!data.errors) {
                  setDetails(data); 
                  setGenres(data.genres); 
                  setCast(data.credits.cast); 
                  setTrailer(data.videos.results[0]?.key)
                  setRecommendations(data.recommendations.results)
              }else{
                  &lt;Alert variant=&quot;danger&quot;&gt;Error&lt;/Alert&gt;
              }
          })
      // eslint-disable-next-line
      }, [])
      
      useEffect( () =&gt; { 
          fetch(`https://api.themoviedb.org/3/movie/${location.state}/watch/providers?api_key=${process.env.REACT_APP_TMDB_KEY}&amp;language=en-US&amp;region=GB`)
          .then((res) =&gt; res.json())
          .then((data) =&gt; {
              if (!data.errors) {
                  console.log(data)
                  setWatch(data.results.GB.flatrate)
              }else{
                  &lt;Alert variant=&quot;danger&quot;&gt;Error&lt;/Alert&gt;
              }
          })
      // eslint-disable-next-line
      }, [])
      
  
      return (
          &lt;div&gt;
              &lt;Helmet&gt;
                  &lt;style&gt;{'body { background-color: black; }'}&lt;/style&gt;
              &lt;/Helmet&gt;
              &lt;div className='details-container mt' style={{backgroundImage: `url(https://image.tmdb.org/t/p/original/${details.backdrop_path})`}}&gt;
                  &lt;div className=&quot;details-content&quot;&gt;
                      &lt;div className=&quot;details-content__poster-container mx-5&quot;&gt; 
                          &lt;img className=&quot;poster&quot; 
                              src={`https://image.tmdb.org/t/p/w300/${details.poster_path}`} 
                              alt= {details.title}
                          /&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;details-content__info&quot;&gt;
                          &lt;div className=&quot;header mb-1&quot;&gt;
                              &lt;h3 className=&quot;title&quot;&gt;{details.title}&lt;/h3&gt;
                              &lt;div className=&quot;rating translate-left rounded-pill mx-3&quot;&gt;
                                  &lt;FontAwesomeIcon icon={faStar} className=&quot;star&quot;/&gt;
                                  {details.vote_average}
                              &lt;/div&gt;
                          &lt;/div&gt;
                          {genres &amp;&amp; (
                              &lt;div className=&quot;genres-container&quot;&gt;
                                  {genres.slice(0,3).map(genreName =&gt; (
                                  &lt;p className=&quot;genres&quot; key={genreName.id}&gt;
                                      {genreName.name}
                                  &lt;/p&gt;
                              ))}
                              &lt;/div&gt;
                          )}
                          &lt;p className=&quot;description&quot;&gt;{details.overview}&lt;/p&gt;
                          &lt;div className=&quot;card-btn&quot;&gt;
                              &lt;div className=&quot;icons&quot;&gt;
                                  &lt;a className=&quot;details icon-btn mx-2&quot; target=&quot;__blank&quot; href={`https://www.youtube.com/watch?v=${trailer}`}&gt;&lt;FontAwesomeIcon className='play' icon={faPlay} /&gt; Trailer&lt;/a&gt;
                                  &lt;a href className=&quot;details icon-btn mx-2&quot;&gt;&lt;FontAwesomeIcon icon={faHeart} /&gt;&lt;/a&gt;
                                  &lt;a href className=&quot;details icon-btn  mx-2&quot;&gt;&lt;FontAwesomeIcon icon={faShare} /&gt; &lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className='watch-icons scroller-container'&gt;  
                          &lt;h5&gt;Where To Watch&lt;/h5&gt;
                          {watch &amp;&amp; (
                              &lt;div className='scroller'&gt;
                                  {watch.map(watchProvider =&gt; (
                                      &lt;img 
                                          className='watch-icons__logo' 
                                          src={`https://image.tmdb.org/t/p/original/${watchProvider.logo_path}`}
                                          alt= {watchProvider.provider_name}
                                      /&gt;
                                  ))}
                              &lt;/div&gt;
                          )}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className='scroll-container'&gt;
                  &lt;h4&gt;Cast&lt;/h4&gt;
                  {cast &amp;&amp; (
                      &lt;div className=&quot;scroll-container__content scroller&quot;&gt;
                          {cast.slice(0,22).map(castName =&gt; (
                              &lt;Nav.Link as={NavLink} exact={true} to={{pathname:`/cast/${castName.id}`, state: castName.id }} className=&quot;hidden-link&quot; &gt;                
                              &lt;div className=&quot;scroll-container__card&quot; key={castName.id}&gt;
                                  &lt;div className=&quot;scroll-container__profile&quot;&gt;
                                      &lt;img className=&quot;scroll-container__img&quot;
                                      src={`https://image.tmdb.org/t/p/w500/${castName.profile_path}`}
                                      alt= {castName.name}
                                      /&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;scroll-container__name&quot;&gt;
                                      &lt;h6 className=&quot;name&quot;&gt;{castName.name}&lt;/h6&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                             &lt;/Nav.Link&gt;
                          ))}
                      &lt;/div&gt;
                  )}
              &lt;/div&gt;
              &lt;div className=&quot;scroll-container films&quot;&gt;
                  &lt;h4&gt;Recommended&lt;/h4&gt;
                  {recommendations &amp;&amp; (
                     &lt;div className='scroller' &gt;
                         {recommendations.slice(0,15).map(movieresults =&gt; (
                              &lt;ScrollCard movieresults={movieresults} key={movieresults.id}/&gt;
                          ))}
                     &lt;/div&gt;       
                  )}
              &lt;/div&gt;
          &lt;/div&gt;
  
      )
  }
  </code></pre>