[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "An"]

[HiCompany5680]

Hello.

I am doing a project in react -native but when executing my project I am getting the following error:

[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "An"]

Stack trace:
  [native code]:null in parse
  node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
  node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
  [native code]:null in callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
  [native code]:null in flushedQueue
  [native code]:null in invokeCallbackAndReturnFlushedQueue
  ...

My code is as follows:

App.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import MealsScreen from './src/screens/Meals';
import Modal from './src/screens/Modal';

const AppNavigation = createStackNavigator({
  Meals: {
    screen: MealsScreen
  }
}, {
  initialRouteName: 'Meals'
});

const RootStack = createStackNavigator( {
  Main: AppNavigation,
  Modal: Modal,
}, {
  mode: 'modal',
  headerMode: 'none',
});

export default createAppContainer( RootStack );

Meals.js

import React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import ListItem from '../components/ListItem';
import UseFetch from '../hooks/useFetch';

const Meals = ({navigation}) => {
    const { loading, dato: meals } = UseFetch('https://serverless.mgyavega.now.sh/api/meals');

    return(
        <View style =  { styles.container }>
            { loading ? <Text>Cargando por favor espere...</Text> :
                <FlatList
                    style = { styles.list }
                    data = { meals }
                    keyExtractor = { x => x._id }
                    renderItem = { ({ item }) =>
                        <ListItem
                            onPress = { () => navigation.navigate('Modal', { id: item._id })}
                            name = { item.name }
                        />
                    }
                />
            }
        </View>
    )
}

Meals.navigationOptions = ({
    title: 'Comidas Disponibles',
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'flex-start',
        justifyContent: 'flex-start'
    },
    list: {
        alignSelf: 'stretch'
    }
});

export default Meals;

ListItem.js

import React from 'react';
import {  TouchableOpacity, Text, StyleSheet } from 'react-native';

export default ({ name, onPress }) => {

    return (
        <TouchableOpacity onPress = { onPress } style={ styles.container }>
            <Text style = { styles.text }> {name} </Text>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 15,
        height: 60,
        justifyContent: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#eee'
    },
    text: {
        fontSize: 16
    }
});

UseFetch.js

import React, { useState, useEffect} from 'react';

const UseFetch = ( url ) => {
    const [ loading, setLoading ] = useState(true);
    const [ dato, setDato] = useState([]); // Este traer al incio un arreglo vacio

    const fetchData = async () => {
        const response = await fetch(url);
        const data = await response.json();
        setDato(data);
        setLoading(false);
    }

    useEffect( () => {
        fetchData();
    }, []);

    return { loading, dato }
}

export default UseFetch;

Modal.js

import React from 'react';
import {  View, Text, } from 'react-native';
import UseFetch from '../hooks/useFetch';

export default ({ navigation }) => {

    const id = navigation.getParam('_id');
    const { loading, dato } = UseFetch(`https://serverless.mgyavega.now.sh/api/meals/${id}`);

    console.log( dato );

    return (

        loading ? <Text>Cargando </Text> :
            <View>
                <Text>  </Text>
                <Text> </Text>
            </View>

    )
}

I could not obtain the _id of the dishes in the Modal, when creating the console.log it indicates that the value is undefined, but when doing the console.log of the database in the method of the console.log modal (data) ; If you show me the data record but it first comes out empty and then the data in the record goes out twice, but in the execution, the error I indicated appears.

I appreciate the collaboration you can provide me.

Thank you.

Mari

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[no-response]

It's been three weeks since we asked for additional information from the author of this issue. As it happens, we don't have enough information to take action. We are going to close this issue, but please do not hesitate to open a new issue if you are still encountering this problem.