React Native Networking Unexpected Token in Function

Question

I am currently trying to learn React Native, but I already struggle in the Networking Part of the Tutorial.

This is the code:

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

class App extends Component {
    function getMoviesFromApiAsync() {
        return fetch('https://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
            .then((responseJson) => {
                return responseJson.movies;
            })
            .catch((error) => {
                console.error(error);
            });
    }


    render() {
        getMoviesFromApiAsync();
    };
}

AppRegistry.registerComponent('testproject', () => App);

And I get the following error:

In my case Line 5, Char 10 would be: function so it expects something else after funct.

babel don't like your word "function" – Andrii Starusiev Mar 13 '17 at 20:10 — Andrii Starusiev, Mar 13 '17 at 20:10

Matt Aft · Accepted Answer · 2017-03-13T20:54:09.253

0

Here is an example of using that function:

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { movies: [] }
  }
   componentDidMount() {
     this.getMoviesFromApiAsync();
   }
   getMoviesFromApiAsync() {
        return fetch('https://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({ movies: responseJson.movies });
            })
            .catch((error) => {
                console.error(error);
            });
    }
    renderMovies = () => 
       this.state.movies.map((movie, i) => <Text key={i}>{movie.title}</Text>)

    render() {
      return (
        <View style={{flex: 1}}>
          {this.renderMovies()}
        </View>
      )
    };
}

AppRegistry.registerComponent('testproject', () => App);

edited Mar 13 '17 at 20:54

answered Mar 13 '17 at 20:17

Matt Aft

8,742
3
24
37

Hm, used your code and got the valid render thing error. Both you and I seem to have forgotten return() inside of render, but now I get `RawText "this.getMoviesFromApiSync()" must be wrapped in an explicit component"` – Mar 13 '17 at 20:20
good catch, yeah need to return and wrap `{this.getMoviesFromApiAsync()}` – Matt Aft Mar 13 '17 at 20:25
Hm, you mean like this? https://i.imgur.com/5wAgXbH.png Because that outputs: http://i.imgur.com/oyu1iB8.png Edit: Also by any chance if you're using Android Studio do you know if there is a way to have better syntax highlighting? – Mar 13 '17 at 20:28
I use Atom for text editor. we just have to set a key for performance reasons, usually it's a unique id but we can just use index here. – Matt Aft Mar 13 '17 at 20:32
Yeah it was also throwing an error because it was trying to render before receiving the data. We have to have a state with an empty array then once api is finished it will render the movies. – Matt Aft Mar 13 '17 at 20:38
Holy, why is it so complicated to fetch some JSON objects and output them? Way easier in jQuery lol. Thanks again for your commitment to my problem but now I got `null is not an object (evaluating '_this.state.movies`. (btw you have a type in responseJ**s**on) – Mar 13 '17 at 20:42
do you have `state = { movies: [] }`? – Matt Aft Mar 13 '17 at 20:43
Yes, after your edit, I do now. Still the same error... :( – Mar 13 '17 at 20:46
sorry, I'm not using an editor. going based off memory, but this should work now – Matt Aft Mar 13 '17 at 20:48
No worries, I'm glad someone tries to help. Sadly, still the same error.... – Mar 13 '17 at 20:50
Holy Moly, you are awesome, it finally works, thank you so much! Guess I have to take a shot now at trying to understand the code there lol :) – Mar 13 '17 at 20:54
Yeah, you can take that if statement off too since that wasnt the problem. Basically the state is being initialized as an empty array. When the component mounts it does the API call and updates the state with the array of movies. Updating the state will cause a re-render and now renderMovies will map the array of movies and return a text element for each. Hope this clears it up a bit. – Matt Aft Mar 13 '17 at 20:55
Yes, thats indeed helpful. Thanks a bunch! – Mar 13 '17 at 20:56

Melih Berberoglu · Answer 2 · 2017-03-13T20:36:42.230

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

    class App extends Component {
       state = {
        movies: null
       }
       componentDidMount() {
         const movies = this.getMoviesFromApiAsync();
         this.setState({movies: movies});
       }
       getMoviesFromApiAsync() {
            return fetch('https://facebook.github.io/react-native/movies.json')
                .then((response) => response.json())
                .then((responseJson) => {
                    return responseJson.movies;
                })
                .catch((error) => {
                    console.error(error);
                });
        }


        render() {
            const { movies } = this.state;
            if (!movies) return null;
            return (
    <View>
              {
               movies.map((movie, index) => {
                console.log("movie:", movie);
                return(
                 <View key={index}>
                  <Text>{movie.name}</Text>
                 </View>
                )
               })
              }
    </View>
            )
        };
    }

    AppRegistry.registerComponent('testproject', () => App);

1 - ) So first set variable in state movies null cause u dont have any movies data

2 - ) Read React Component Lifecycle ComponentDidMount run after render and call getMovies func for fetch data and write in the state with this.setState

3 - ) Check u have movies with if(!movies) return null; or return ActivityIndicator for loading but if u dont get movies activity indicator run forever.

4 - ) this.setState render your component again with new state

Hm, thank you but now it says "Unexpected Token" at `{movies} = this.state;` — , Mar 13 '17 at 20:34
sorry i wrote in textedit and i didnt test const { movies } = this.state; edited. @PoTTii — Melih Berberoglu, Mar 13 '17 at 20:37

React Native Networking Unexpected Token in Function

2 Answers2