Unhandled Rejection (TypeError): this.state.movie.map is not a function

Question

After hours, multiple searches and trying to correct my code on my own, i cannot get this working or find any clear documentation on my specific issue. Any help will be much appreciated!

I'm trying to make a movie rating app and i've gotten almost to the end. However, what i'm trying to do now is to display my information from the API. I have a separate component "SearchForm.tsx" that handles the search-field that is called in app.tsx after the API call as " + SearchForm " which is supposed to equal the query for the API. When i try to input text and hit return i get stuck at the:

"unhandled Rejection (TypeError): this.state.movie.map is not a function".

The issue occurs in my App.tsx file at line 46 and 27.

API Example:

Here's where i'm trying to display "https://api.themoviedb.org/3/search/movie?api_key=58db259ec7d41d210fee1d1dc69b6fca&query=home"

App.tsx

import axios from "axios";
import * as React from "react";
import "./App.css";
import MoviesList from "./Components/MoviesList";
import SearchForm from "./Components/SearchForm";

export default class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: true,
      movie: []
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  public handleSubmit(value: any) {
    // const searchInput = value; // you get the value of movieName input here

    const sortByPop = "&sort_by=popularity.desc";
    const requestUrl =
      "https://api.themoviedb.org/3/search/movie?api_key=58db259ec7d41d210fee1d1dc69b6fca&query=" +
      SearchForm +
      sortByPop;

    return axios.get(requestUrl).then(response => {
[27]err this.setState(
        loading: false,
        movie: response.data
      });
      // tslint:disable-next-line:no-console
      console.log(response.data);
    });
  }

  public render() {
    return (
      <div>
        <div className="main-header">
          <div className="inner">
            <h1 className="main-title">Playpilot Assignment</h1>
            <SearchForm onSubmit={this.handleSubmit} />
          </div>
        </div>
        <div className="main-content">
[46]err   {this.state.movie.map(movie => ( 
            <div className="movieTitle">
              <div className="movieCard">
                <img
                  className="posterImg"
                  src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${
                    movie.poster_path
                  }`}
                  alt={movie.title}
                />
                <div className="searchFilmTitles" key={movie.id}>
                  {movie.title}
                </div>
              </div>
            </div>
          ))}
          {this.state.loading ? (
            <h2>Loading...</h2>
          ) : (
            <MoviesList data={this.state.moviesList} />
          )}
        </div>
      </div>
    );
  }
}

SearchForm.tsx

import * as React from "react";

export default class SearchForm extends React.Component<any, any> {
  public value: HTMLInputElement | null;
  constructor(props: any) {
    super(props);

    this.state = {
      movie: []
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  public handleChange(event: any) {
    this.setState({ value: event.target.value });
  }

  public handleSubmit(event: any) {
    event.preventDefault();
    if (this.props.onSubmit && typeof this.props.onSubmit === "function") {
      this.props.onSubmit(this.state.value);
    }
  }

  public render() {
    return (
      <form className="search-form" onSubmit={this.handleSubmit}>
        <label className="is-hidden" htmlFor="search">
          Search
        </label>
        <input
          type="search"
          onChange={this.handleChange}
          name="search"
          ref={input => (this.value = input)}
          placeholder="Search..."
        />
        <button type="submit" id="submit" className="search-button">
          <i className="material-icons icn-search" />
        </button>
      </form>
    );
  }
}

MoviesList.tsx

import * as React from "react";
import Movie from "./Movie";

const MoviesList = (props: any) => {
  const results = props.data;
  let movie: any;
[7]err  if (results.data) {
    // tslint:disable-next-line:no-shadowed-variable
    movie = results.map((movie: any) => (
      <Movie url={props.url} key={movie.id} />
    ));
  } else {
    movie = <h1>404: No movies found.</h1>;
  }

  return <ul className="movie-list">{movie}</ul>;
};

export default MoviesList;

Again, thank you for any help!

Answer 1

response.data is actually not an array, but an object. Change your api call to this:

this.setState(
  loading: false,
  movie: response.data.results // results is the array you are looking for.
});

Or, maybe better, map over results in render function:

{this.state.movie && this.state.movie.results.map(movie => ( 
    ...
))}