React- TypeError - this.state.movies.map

Question

I'm working on a movie rental project called MoVid, which is in React and JavaScript. Here's my code:

App.js

import React, { Component } from "react";
import Movies from "./components/movies";
import "./App.css";

function App() {
  return (
    <main className="container">
      <Movies></Movies>
    </main>
  );
}

export default App;

Movie.jsx

import React, { Component } from "react";
import { getMovies } from "../services/fakeMovieService";

class Movies extends Component {
    state = {};

    render() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
               </thead>
           <tbody>
               {this.state.movies.map(movie => (
                   <tr>
                       <td>{movie.title}</td>
                       <td>{movie.genre.name}</td>
                       <td>{movie.numberInStock}</td>
                       <td>{movie.dailyRentalRate}</td>
                   </tr>
               ))}
           </tbody>
         </table>
    );
  }
}

export default Movies;

fakeGenreService.js

export const genres = [
  { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
  { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" }
];

export function getGenres() {
  return genres.filter(g => g);
}

fakeMovieService.js

import * as genresAPI from "./fakeGenreService";

const movies = [
{
  _id: "5b21ca3eeb7f6fbccd471815",
  title: "Terminator",
  genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  numberInStock: 6,
  dailyRentalRate: 2.5,
  publishDate: "2018-01-03T19:04:28.809Z"
},
{
  _id: "5b21ca3eeb7f6fbccd471816",
  title: "Die Hard",
  genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  numberInStock: 5,
  dailyRentalRate: 2.5
},
{
  _id: "5b21ca3eeb7f6fbccd471817",
  title: "Get Out",
  genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
  numberInStock: 8,
  dailyRentalRate: 3.5
}];

export function getMovies() {
  return movies;
}

export function getMovie(id) {
  return movies.find(m => m._id === id);
}

export function saveMovie(movie) {
  let movieInDb = movies.find(m => m._id === movie._id) || {};
  movieInDb.name = movie.name;
  movieInDb.genre = genresAPI.genres.find(g => g._id === movie.genreId);
  movieInDb.numberInStock = movie.numberInStock;
  movieInDb.dailyRentalRate = movie.dailyRentalRate;

  if (!movieInDb._id) {
    movieInDb._id = Date.now();
    movies.push(movieInDb);
  }

  return movieInDb;
}

export function deleteMovie(id) {
  let movieInDb = movies.find(m => m._id === id);
  movies.splice(movies.indexOf(movieInDb), 1);
  return movieInDb;
}

I have looked at:

React code throwing “TypeError: this.props.data.map is not a function”

React JS - Uncaught TypeError: this.props.data.map is not a function

But they don't help.

The other 3 files of code is in here. If you need more information or code, please ask me! Thanks in advance!

Please add your code where you get the movies data and assign it the `this.state.movies` — thelonglqd, Nov 15 '19 at 07:29
@thelonglqd I added the link to Trello for the 3 other files. — , Nov 15 '19 at 07:42
In `Movie` component, you did not use `getMovies` any where ? — thelonglqd, Nov 15 '19 at 07:55

score 0 · Answer 1 · answered Nov 15 '19 at 07:28

0

You have no movies in your state from the start. Initialise an array inside the constructor:

state = {
    movies: [],
};

answered Nov 15 '19 at 07:28

Animus

665
12
24

score 0 · Answer 2 · answered Nov 15 '19 at 07:28

0

this.state.movies is not an array. It's undefined.

answered Nov 15 '19 at 07:28

Jayly

15
5

If this case, the error should be `can not read property map of undefined`, not `map is not a function` – thelonglqd Nov 15 '19 at 07:32

score 0 · Answer 3 · answered Nov 15 '19 at 08:07

In state of Movie Component, you need to add movies array like

state = {
movies:[]
};

then update the movies state. After that, you can map the movies array like this

<tbody>
     {this.state.movies.map(movie => (
    <tr>
     <td>{movie.title}</td>
     <td>{movie.genre.name}</td>
     <td>{movie.numberInStock}</td>
     <td>{movie.dailyRentalRate}</td>
    </tr>
   ))}
</tbody>

score 0 · Accepted Answer · answered Nov 15 '19 at 08:19

I ran your code and the error you got is Cannot read property 'map' of undefined.

Firstly, you do not use getMovies anywhere, your movies data is not available in Movies component

Secondly, you should initialize movies as empty array.

Your Movies component code should look like this:

import React, { Component } from "react";
import { getMovies } from "../services/fakeMovieService";

class Movies extends Component {
    state = { movies: [] };

    componentDidMount() {
      this.setState({ movies: getMovies() });
    }

    render() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
               </thead>
           <tbody>
               {this.state.movies.map(movie => (
                   <tr>
                       <td>{movie.title}</td>
                       <td>{movie.genre.name}</td>
                       <td>{movie.numberInStock}</td>
                       <td>{movie.dailyRentalRate}</td>
                   </tr>
               ))}
           </tbody>
         </table>
    );
  }
}

export default Movies;

score 0 · Answer 5 · edited Nov 13 '20 at 21:38

0

I was working on the same project, looks like you were missing brackets in value method paginate function:

const startIndex = (pageNumber-1) * pageSize;

return _(items)
   .slice(startIndex)
   .take(pageSize)
   .value();

edited Nov 13 '20 at 21:38

Joundill

6,828
12
36
50

answered Nov 13 '20 at 20:55

Prakash M

1

React- TypeError - this.state.movies.map

5 Answers5