CODEWITHSUNDEEP
apireact-native
LuvYHWH
LuvYHWH

Reputation: 9

Getting the data in console but not able to see any api call data on the screen React Native

Hi i am new to react native. I am trying to call any api and not able to see any data on the app screen but can see the data on the console. I think this issue is with my state but whenever i am trying to add anything on the state it gives me a response "json.data' is not an object. Please guide me on this.Thanks in advance. 

export default App = () => {
    const [isLoading, setLoading] = useState(true);

    const [data, setData] = useState([]);

    useEffect(() => {
      fetch('https://URL', {
        method: 'GET',
        timeout: 10000,
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
         body: JSON.stringify({
            "this": "",
            "this 2": ""
        }) 
      })
      .then((response) => response.text())
      .then((responseData) => { console.log(responseData); })
      .then((json)=> setData(text(json.data)))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false)); [];
    }, []);

    return (
        <ScrollView style={styles.container}>
            {isLoading ? <ActivityIndicator /> : (

               <Text> {data.text} </Text>

               <FlatList
                 data={data}   
                 renderItem={({ item }) => (
                   <Text>{item.skill}</Text>
                 )}
               />
            )}
        </ScrollView>
    );
};

Upvotes: 1

Views: 435

Answers (1)

Maycon Mesquita
Maycon Mesquita

Reputation: 4590

You have to parse the JSON before displaying:

Edit: I replaced response.text() with response.json() to handle the JSON (eg: parse) correctly.

export default App = () => {
    const [isLoading, setLoading] = useState(true);

    const [data, setData] = useState([]);

    useEffect(() => {
      fetch('https://URL', {
        method: 'GET',
        timeout: 10000,
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
         body: JSON.stringify({
            "this": "",
            "this 2": ""
        }) 
      })
      .then((response) => response.json())
      .then((data) => setData(json.data))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false)); [];
    }, []);

    return (
        <ScrollView style={styles.container}>
            {isLoading ? <ActivityIndicator /> : (
               <FlatList
                 data={data}   
                 renderItem={({ item }) => (
                   <Text>{item.skill}</Text>
                 )}
               />
            )}
        </ScrollView>
    );
};

Upvotes: 1

Related Questions