Unexpected token when trying to iterate over Object

Question

Why do I get "Unexpected token error for semicolon. I am trying to iterate over a object that has 5 child objects using React and JSX. The error pointing to the following line. Thank you.

Object.keys(movies).map((movie) => console.log(movie.id)); 

Below is how I have the entire App.js file coded.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


const profiles = [
  {
    id: 1,
    userID: '1',
    favoriteMovieID: '1',
  },
  {
    id: 2,
    userID: '2',
    favoriteMovieID: '1',
  },
  {
    id: 3,
    userID: '4',
    favoriteMovieID: '5',
  },
  {
    id: 4,
    userID: '5',
    favoriteMovieID: '2',
  },
  {
    id: 5,
    userID: '3',
    favoriteMovieID: '5',
  },
  {
    id: 6,
    userID: '6',
    favoriteMovieID: '4',
  },
];

const users = {
  1: {
    id: 1,
    name: 'Jane Jones',
    userName: 'coder',
  },
  2: {
    id: 2,
    name: 'Matthew Johnson',
    userName: 'mpage',
  },
  3: {
    id: 3,
    name: 'Autumn Green',
    userName: 'user123',
  },
  4: {
    id: 3,
    name: 'John Doe',
    userName: 'user123',
  },
  5: {
    id: 5,
    name: 'Lauren Carlson',
    userName: 'user123',
  },
  6: {
    id: 6,
    name: 'Nicholas Lain',
    userName: 'user123',
  },
};

const movies = {
  1: {
    id: 1,
    name: 'Planet Earth',
  },
  2: {
    id: 2,
    name: 'Selma',
  },
  3: {
    id: 3,
    name: 'Million Dollar Baby',
  },
  4: {
    id: 4,
    name: 'Forrest Gump',
  },
  5: {
    id: 5,
    name: 'Get Out',
  },
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">ReactND - Coding Practice</h1>
        </header>
        <h2>How Popular is Your Favorite Movie?</h2>
        {
            <h2>
                { 
                    Object.keys(movies).map((movie) => console.log(movie.id)); 

                }
            </h2>
        }
      </div>
    );
  }
}

export default App;

Answer 1

When iterating over object keys, you can use the [] notation to access the values as Object.keys returns an array of object's keys.

Additionally, there is no need to wrap the h2 element with {} as it's already a valid JSX.

 class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>{Object.keys(movies).map(movie => movies[movie].name) + " "}</h2>
        <h2>{Object.keys(users).map(user => users[user].userName) + " "}</h2>
        <h2>
          {Object.keys(profiles).map(
            profile => profiles[profile].favoriteMovieID
          ) + " "}
        </h2>
      </div>
    );
  }
}