react-native: axios get 500 internal server error

Question

The code should return list of album objects in the console, but is not returning it and instead getting a 500 internal server error.

Error : enter image description here

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import axios from 'axios';

class AlbumList extends Component {

  componentWillMount() {
      axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        .then(function(response){
          console.log(response);
        })
  }

  render(){
    return(
      <View>
        <Text> Albums ! </Text>
      </View>
    );
  }
}

export default AlbumList;

Answer 1

If API return 500 it means error on server side . Not on React-native or front-end Side

Answer 2

I was watching the exact same course and had this problem. As you can see if you read through the questions there, it appears that React Native has some compatibility issues with axios.

My problem was fixed by doing this:

componentWillMount() {
    fetch("https://rallycoding.herokuapp.com/api/music_albums")
        .then(response => response.json())
        .then(data => console.log(data));
}

Answer 3

can u try this,

axios({
    method: 'get',
    url: 'https://rallycoding.herokuapp.com/api/music_albums',
    }).then(response => {
      console.log(response.data);

    })
    .catch((error) => {
      console.log(error);
    });