Getting an empty array in React while fetching the data from the api

Question

I'm fetching from the moviedb api and working on searching movies. I've taken some reference from alligator.io tutorial. Below is my code of the Header component where i am fetching the data.

Header.js

import React, { Component } from "react"
import { Navbar, Button, Form, FormControl } from "react-bootstrap"
import { NavLink } from "react-router-dom"
import axios from "axios"
const apiKey = process.env.REACT_APP_MOVIE_DB_API_KEY


class Header extends Component {
  state = {
    isSearching: false,
    value: "",
    movies: []
  }

  searchMovies = async val => {
    console.log("val", val)
    this.setState({ isSearching: true })
    const res = await axios(
      `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=en-US&query=${val}page=1&include_adult=true`
    )
    const movies = await res.data.results
    console.log(movies)
    this.setState({ movies: movies, isSearching: false })
  }

  handleChange = e => {
    const { name, value } = e.target
    this.searchMovies(value)
    this.setState({
      [name]: value
    })
  }

  handleSearch = () => {
    console.log(this.state.movies)
  }

  render() {
    return (
      <div>
        <Navbar
          bg="dark"
          expand="lg"
          style={{ justifyContent: "space-around" }}
        >
          <NavLink to="/">
            <Navbar.Brand>Movie Catalogue</Navbar.Brand>
          </NavLink>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Form inline>
              <FormControl
                type="text"
                placeholder="Search"
                className="mr-sm-2"
                onChange={this.handleChange}
                name="value"
                value={this.state.value}
              />
              <Button variant="dark" onClick={this.handleSearch}>Search</Button>
            </Form>
          </Navbar.Collapse>

          <NavLink to="/popular">Popular</NavLink>
          <NavLink to="/now-playing">Now Playing</NavLink>
          <NavLink to="/top-rated">Top Rated</NavLink>
          <NavLink to="/upcoming">Upcoming</NavLink>
        </Navbar>
      </div>
    )
  }
}

export default Header

I am getting an empty array in movies. When I console log this.state.movies inside handleSearch it's stil returning an empty array. I don't know why's it happening. The url and everything is correct but I'm getting an empty array.

Shouldn't it be await axios.get() ?

rrd
– rrd

2020-03-05 09:01:21 +00:00
Commented Mar 5, 2020 at 9:01 — rrd
– rrd, Commented Mar 5, 2020 at 9:01

Isa Gul · Accepted Answer · 2020-03-05 09:07:12Z

1

I think you should use get() method in your searchMovies function.

const response = await axios.get('/user?ID=12345');
console.log(response);

answered Mar 5, 2020 at 9:07

Isa Gul

563 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

joy08 · Accepted Answer · 2020-03-05 09:10:50Z

0

You are not calling appropriate method of axios. Use get() method

Try this:

 searchMovies = async val => {
    this.setState({ isSearching: true })
    const res = await axios.get(
      `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=en-US&query=${val}page=1&include_adult=true`;
    )
    const movies = await res.data.results;
    this.setState({ movies: movies, isSearching: false })
  }

answered Mar 5, 2020 at 9:10

joy08

9,6729 gold badges43 silver badges81 bronze badges

5 Comments

hellraiser999 Over a year ago

still getting the same result.

joy08 Over a year ago

@hellraiser999 res.data.results what does this give?

hellraiser999 Over a year ago

an empty array.

joy08 Over a year ago

@hellraiser999 then may be the issue is with your api or may be your url

hellraiser999 Over a year ago

sorry there was a minor mistake in the endpoint. I didn't put & after the query string. Thanks for the help anyways.

Collectives™ on Stack Overflow

Getting an empty array in React while fetching the data from the api

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related