CODEWITHSUNDEEP
reactjsreact-native
firstofthree
firstofthree

Reputation: 3

Parsing Error: Unexpected Token (Fatal) React Native JS

So, I can't figure out why the last line in my code ends up displaying an error, and I couldn't find any other posts that help in my particular case. Here's the code:

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

class AlbumList extends Component {
  state = { albums: [] };


componentWilMount() {
  fetch('https://rallycoding.herokuapp.com/api/music_albums')
  .then(response => response.json())
  .then(response => this.setState({ albums: response.data }));
}

renderAlbums() {
  return this.state.albums.map(album => <Text>{album.title}</Text>);
}

  render() {
    console.log(this.state.albums);
  }

  return() {
  <View>
  {this.renderAlbums()}
  </View>
}

Upvotes: 0

Views: 134

Answers (1)

Artem Mirchenko
Artem Mirchenko

Reputation: 2170

Because you call return like method, but return should be in your render() method.

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

class AlbumList extends Component {
  state = { albums: [] };


  componentWilMount() {
    fetch('https://rallycoding.herokuapp.com/api/music_albums')
      .then(response => response.json())
      .then(response => this.setState({ albums: response.data }));
  }

  renderAlbums() {
    return this.state.albums.map(album => <Text>{album.title}</Text>);
  }

  render() {
    console.log(this.state.albums);
    return (
      <View>
      {this.renderAlbums()}
    </View>
    );
  }
}

Upvotes: 1

Related Questions