title: React- TypeError - this.state.movies.map
body: <p>I'm working on a movie rental project called MoVid, which is in React and JavaScript. Here's my code:</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from "react";
  import Movies from "./components/movies";
  import "./App.css";
  
  function App() {
    return (
      &lt;main className="container"&gt;
        &lt;Movies&gt;&lt;/Movies&gt;
      &lt;/main&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>Movie.jsx</p>
  
  <pre><code>import React, { Component } from "react";
  import { getMovies } from "../services/fakeMovieService";
  
  class Movies extends Component {
      state = {};
  
      render() {
          return (
              &lt;table className="table"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Title&lt;/th&gt;
                          &lt;th&gt;Genre&lt;/th&gt;
                          &lt;th&gt;Stock&lt;/th&gt;
                          &lt;th&gt;Rate&lt;/th&gt;
                      &lt;/tr&gt;
                 &lt;/thead&gt;
             &lt;tbody&gt;
                 {this.state.movies.map(movie =&gt; (
                     &lt;tr&gt;
                         &lt;td&gt;{movie.title}&lt;/td&gt;
                         &lt;td&gt;{movie.genre.name}&lt;/td&gt;
                         &lt;td&gt;{movie.numberInStock}&lt;/td&gt;
                         &lt;td&gt;{movie.dailyRentalRate}&lt;/td&gt;
                     &lt;/tr&gt;
                 ))}
             &lt;/tbody&gt;
           &lt;/table&gt;
      );
    }
  }
  
  export default Movies;
  </code></pre>
  
  <p>fakeGenreService.js</p>
  
  <pre><code>export const genres = [
    { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
    { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
    { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" }
  ];
  
  export function getGenres() {
    return genres.filter(g =&gt; g);
  }
  </code></pre>
  
  <p>fakeMovieService.js</p>
  
  <pre><code>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 =&gt; m._id === id);
  }
  
  export function saveMovie(movie) {
    let movieInDb = movies.find(m =&gt; m._id === movie._id) || {};
    movieInDb.name = movie.name;
    movieInDb.genre = genresAPI.genres.find(g =&gt; 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 =&gt; m._id === id);
    movies.splice(movies.indexOf(movieInDb), 1);
    return movieInDb;
  }
  </code></pre>
  
  <p>I have looked at:</p>
  
  <p><a href="https://stackoverflow.com/questions/21074638/react-code-throwing-typeerror-this-props-data-map-is-not-a-function">React code throwing “TypeError: this.props.data.map is not a function”</a></p>
  
  <p><a href="https://stackoverflow.com/questions/30142361/react-js-uncaught-typeerror-this-props-data-map-is-not-a-function">React JS - Uncaught TypeError: this.props.data.map is not a function</a></p>
  
  <p>But they don't help.</p>
  
  <p>The other 3 files of code is in <a href="https://trello.com/b/YS2hteC8/code" rel="nofollow noreferrer">here</a>.
  If you need more information or code, please ask me! Thanks in advance!</p>