I am making an application that takes data from API and displays it on the screen. When the screen is rendered it gives the following error: Render Error undefined is not an object (evaluating 'this.text'). funny thing is nothing like 'this.text' is in any of my screens except for a file in node modules. Anyway, here is the file
the screen that renders the data:
/* the screen that renders the data */
import React, {useEffect, useState} from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const Experts = () => {
useEffect(()=> {
fetch('http://icantputtheactualurlcuzitsmyipaddress.com/expertsList/',{
method: 'GET'
})
.then(resp => resp.json)
.then(data => {
setData(data)
})
.catch(error => console.log('something is not suppose to be happening'))
}, [])
const [data, setData] = useState([]);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => (
<Text style={styles.item}>{item.name}</Text>
)}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: 'teal',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
color: 'white',
},
title: {
fontSize: 32,
},
});
export default Experts;i'd truly appretiate any input, im kinda new to this.
I think your data array is empty 1st time before API fetch and Text inside your FlatList is trying to fetch so provide null checking by "?" like item?.name
<SafeAreaView style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => (
<Text style={styles.item}>{item?.name}</Text>
)}
keyExtractor = (item, index) => item.id;
/>
</SafeAreaView>
);
And don't forget to add keyExtractor
so after some research i found out it was because the call for the api in the effect hook was a function. and you need parenthesis for functions. Also, the reason it showed this.text was because it was under the json parser. so to the part you've been waiting for
the code:
useEffect(()=> {
fetch('http://skrskr.com/api/experts/',{
method: 'GET'
})
/* make sure to put the needed parenthesis */
.then((resp) => resp.json())
.then(
(json) => setData(json)
)
.catch(error => console.log('something is not suppose to be happening'))
}, [])
const [data, setData] = useState([]); i hope this finds who needs it