CODEWITHSUNDEEP
javascriptreactjsaxios
Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7759

Axios returning undefined in React component

Essentially I have a input field and a submit button. My goal is to have the input field be what is requested in the axios request.

This is the code for my axios request:

import axios from 'axios';

module.exports = {
  getItunesArtists: function(ARTIST_NAME) {
    var encodedURI = window.encodeURI('https://itunes.apple.com/search?term=' + ARTIST_NAME);

    return axios.get(encodedURI).then(function(response) {
      console.log('response.data.items', response.data.items);
    });
  },
};

The console spits back

response.data.items undefined

And this is my main component and a functional component.

import React, { Component } from 'react';
import api from '../utils/api';

import axios from 'axios';

// prettier-ignore
function Albums(props) {
  return (
    <ul>
      {props.albums.map(function(album, index) {
        return (
          <li key={album.name} >

            <ul >
              <li>
               {console.log(album)}
              </li>

            </ul>
          </li>
        );
      })}
    </ul>
  );
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { albums: [], artistSearched: '', dirty: false };
    this.handleSearchTermChange = this.handleSearchTermChange.bind(this);
    this.getAlbums = this.getAlbums.bind(this);
  }

  componentDidMount() {
    this.getAlbums(this.state.artistSearched);
  }

  getAlbums(artist) {
    this.setState(function() {
      return {
        artistSearched: artist,
        albums: [],
      };
    });
    api.getItunesArtists(artist).then(
      function(artists) {
        this.setState(function() {
          return {
            albums: artists,
          };
        });
      }.bind(this)
    );
  }

  handleSearchTermChange(event) {
    console.log(event.target.value);
    this.setState({ artistSearched: event.target.value });
  }

  render() {
    const { albums, artistSearched } = this.state;

    return (
      <div>
        <h1>Itunes Album Fetcher</h1>
        <form style={{ marginTop: '20px' }}>
          <input
            onChange={this.handleSearchTermChange}
            value={this.state.artistSearched}
            className="form-control"
            placeholder="Enter album name"
          />
          <button type="submit" disabled={!artistSearched}>
            Search
          </button>
        </form>
        {!this.state.albums ? <p>Loading</p> : <Albums albums={this.state.albums} />}
      </div>
    );
  }
}

Thank you in advance!

Upvotes: 1

Views: 933

Answers (1)

J Livengood
J Livengood

Reputation: 2738

You're console.logging response.data.items, but when I call this API I see the format of the response is different:

{
 "resultCount":50,
 "results": [ ... ]
}

You want to use response.data.results

Upvotes: 1

Related Questions