Error when passing parameter to API in react native

Question

I am building a project in react which uses images as buttons and by pressing the button an API is called, which renders information on another screen. Each image button contains a paramater (route) which is put into the API and so renders different information for each button pressed.

I coded the paramater which is called route and also the buttons, however when the button is pressed, I get a syntax error: [SyntaxError: JSON Parse error: Unrecognized token '<']. And on the console it prints empty string.

Any help would be appreciated.

Below is the code:

Here is the homepage which contains the buttons as images:


import { Dimensions, StyleSheet, Text, View, ImageBackground, Image, TouchableOpacity} from 'react-native';
import React, { Component, useState} from 'react';


export default function HomePage({ navigation }) {
    const localImage = require('../../assets/starnight.jpg')
return (
    
    
 


         navigation.navigate('Horoscope', { sign: "aries" })}>
           
           

         navigation.navigate('Horoscope', { sign: "taurus" })}>
           
        

         navigation.navigate('Horoscope', { sign: "gemini" })}>
           
           

            navigation.navigate('Horoscope', { sign: "cancer" })}>
           
           

            navigation.navigate('Horoscope', { sign: "leo" })}>
           
           

            navigation.navigate('Horoscope', { sign:  "virgo" })}>
           
           

            navigation.navigate('Horoscope', { sign: "libra" })}>
           
           

            navigation.navigate('Horoscope', { sign: "scorpio" })}>
           
           

            navigation.navigate('Horoscope', { sign: "sagittarius" })}>
           
           

            navigation.navigate('Horoscope', { sign:  "capricorn" })}>
           
           

            navigation.navigate('Horoscope', { sign:  "aquarius" })}>
           
           

            navigation.navigate('Horoscope', { sign:  "pisces" })}>
            
              

                  Astrology
                  Click on your star sign to get your daily horoscope
                  
    
    
);
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
},
title: {
  color: 'white',
  fontWeight: 'bold',
  fontSize: 40,
},
header: {
  color: "red",
  fontWeight: "bold",
  fontSize: 20,
},
subheader: {
color: "white",
fontWeight: "bold",
fontSize: 16,
textAlign: 'center',
paddingLeft: 50,
paddingRight: 50
},
text: {
  color: "black",
  fontSize: 14,
}

});

Here is the code for the horoscope page which is where the API is called and the info from the API is returned.

import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet, ImageBackground } from 'react-native';
import axios from "axios";


    export default function Zodiac({ route }) {

      const [isLoading, setIsLoading] = useState(true);
      const [data, setData] = useState([]);
      const { sign } = route.params;




  useEffect(() => {
    const url = `https://aztro.sameerkumar.website/?sign=${route}&day=today`;
    fetch(url)
      .then((response) => response.json())
      .then((json) => setData(json['results']))
      .catch((error) => console.log(error));
  }, []);

  useEffect(() => {
    if (data.length !== 0) {
      setIsLoading(false);
    }
    console.log(data);
  }, [data]);

          
      return (

        
          {isLoading ? (
            Loading... {sign}
          ) : ( 
        
              
                {sign}
                 {data.date_range} 
                Today: {data.current_date}
                      Description: {data.description} 
    
            
    
                
            
                    Compatibility: {data.compatibility} 
                    
          
    
          
            
                    Lucky Number: {data.lucky_number} 
                    
          
    
                
    
    
        
        
            
    
                Lucky Time: {data.lucky_time}  
            
          
    
    
            
            
    
                     Color: {data.color} 
                    
          
                
    
    
    
    
    
    
        
            
                      Mood: {data.mood} 
            
          
          
          
         
         )}
              
      )};
            
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            width: null,
            height: null,
          
        },
        title: {
          textAlign: 'center',
          fontWeight: 'bold',
          fontSize: 40,
          color: 'white'
        },
        text: {
        color: "white",
        fontSize: 10,
        textAlign: 'center',
        paddingTop: 70,
        padding: 55
    
        },
        text1: {
        color: "white",
        fontWeight: "bold",
        fontSize: 10,
        textAlign: 'center',
        margin: 10
    
        },
        here1: {
            flexDirection: 'row',
            justifyContent: "center"
        },
        here2: {
            flexDirection: 'row',
            justifyContent: "center",
            margin: -20
    
        },
        here3: {
            flexDirection: 'row',
            justifyContent: "center",
            margin: -24
        },
        Image1: {
            width: 185,
            height: 185,
        }
    
    
        
        });

Error when passing parameter to API in react native

0 Answers