Unexpected token, expected "}" Error while passing object from FetchMovie to MovieList com-CodePudding

This is MovieList.js and I passed a react object as prop to this component from FetchMovie.js which I gave below. I tried but it's still there . Pls help

MovieList.js

import React from "react";
function MovieList(props) {
  console.log(props.newFilm)
  return (
    <div className="filmm">
      <h1>{props.newFilm.film_name}</h1>
      <img src={props.newFilm.images.still.2.medium.film_image} />//line 7   
    </div>
  );
}

export default MovieList

FetchMovie.js This is the FetchMovie.js file and through this component I passed users object as a prop to MovieList.js and that error occured. Pls help. I have given the users object below the FetchMOvies.js.

import React, { useState } from "react";
import MovieList from "./MovieList";
import users from "./MovieView";
let s = users.films;
function FetchMovies() {
  return (
    <div>
      {s.map((film) => (
        <MovieList key={film.film_id} newFilm={film} />
      ))}
    </div>
  );
}

export default FetchMovies;

This is the users object:

users={
  films: [
    {
      film_id: 258136,
      imdb_id: 2119543,
      imdb_title_id: "tt2119543",
      film_name: "The House With A Clock In Its Walls",
      other_titles: {
        EN: "The House With A Clock In Its Walls"
      },
      release_dates: [
        {
          release_date: "2018-09-21",
          notes: "GBR"
        }
      ],
      age_rating: [
        {
          rating: "12A ",
          age_rating_image:
            "https://d2z9fe5yu2p0av.cloudfront.net/age_rating_logos/uk/12a.png",
          age_advisory: "moderate threat, scary scenes"
        }
      ],
      film_trailer: "https://dzm1iom8kpoas.cloudfront.net/258136_uk_high.mp4",
      synopsis_long:
        "In the tradition of Amblin classics where fantastical events occur in the most unexpected places, Jack Black and two-time Academy Award® winner Cate Blanchett star in THE HOUSE WITH A CLOCK IN ITS WALLS, from Amblin Entertainment.  The magical adventure tells the spine-tingling tale of 10-year-old Lewis (Owen Vaccaro) who goes to live with his uncle in a creaky old house with a mysterious tick-tocking heart.  But his new town's sleepy façade jolts to life with a secret world of warlocks and witches when Lewis accidentally awakens the dead.",
      images: {
        poster: {
          "1": {
            image_orientation: "portrait",
            region: "US",
            medium: {
              film_image:
                "https://d3ltpb4h29tx4j.cloudfront.net/258136/258136h1.jpg",
              width: 200,
              height: 300
            }
          }
        },
        still: {
          "2": {
            image_orientation: "landscape",
            medium: {
              film_image:
                "https://d3ltpb4h29tx4j.cloudfront.net/258136/258136h2.jpg",
              width: 300,
              height: 199
            }
          }
        }
      }
    }
  ],
  status: {
    count: 1,
    state: "OK",
    method: "filmsComingSoon",
    message: null,
    request_method: "GET",
    version: "ZUPIv200",
    territory: "UK",
    device_datetime_sent: "2018-09-14T09:26:34.793Z",
    device_datetime_used: "2018-09-14 09:26:34"
  }
};

CodePudding user response：

The key of an object has to be a string. You did it right in the object itself. But when you attempt to access it, the issue reappears.

If you insist on using it as it (maybe you do not have the choice), you have to use the square bracket notation:

props.newFilm.images.still["2"].medium.film_image

Why that error: JavaScript stopped looking in the object when it encountered the number and was about to return props.newFilm.images.still The rest not being understood, the error thrown was "expecting a }"

CodePudding user response：

While using the numbered key, use bracket notation instead of dot notation

<img src={props.newFilm.images.still.2.medium.film_image} />

<img src={props.newFilm.images.still["2"].medium.film_image} />