i have following code returning value from AsyncStorage
const getData = async () => {
try {
let listlayana = JSON.parse(await AsyncStorage.getItem('layanan'));
return listlayana
}catch (e){
}
}
const datas = getData()
and i trying to loop this function result with this
{
datas.map((item, i) => (
<TouchableOpacity key={i}>
<View key={i} style={styles.listitem}>
<Text style={styles.listtext} >{item.nmlayanan}</Text>
<Text style={[styles.listtext, {color: "#b4b3b3"}]}> > </Text>
</View>
</TouchableOpacity>
))
}
and i got this following error
undefined is not a function (near '...datas.map...')
You can use React.useEffect and React.useState for this target like this:
const [data, setData] = React.useState(); //add this useState for the data
const getData = async () => {
try {
let listlayana = JSON.parse(await AsyncStorage.getItem("layanan"));
return listlayana;
} catch (e) {}
};
// and add this async useeffect for fetching data from asyncstorage
React.useEffect(async () => {
const scopeData = await getData();
setData(scopeData);
}, []);
and then your render function like this:
{data.map((item, i) => (
<TouchableOpacity key={i}>
<View key={i} style={styles.listitem}>
<Text style={styles.listtext}>{item.nmlayanan}</Text>
<Text style={[styles.listtext, { color: "#b4b3b3" }]}> > </Text>
</View>
</TouchableOpacity>
))}
and your component like this:
export default function SOF() {
const [data, setData] = React.useState();
const getData = async () => {
try {
let listlayana = JSON.parse(await AsyncStorage.getItem("layanan"));
return listlayana;
} catch (e) {}
};
React.useEffect(async () => {
const scopeData = await getData();
setData(scopeData);
});
return (
<View>
{data.map((item, i) => (
<TouchableOpacity key={i}>
<View key={i} style={styles.listitem}>
<Text style={styles.listtext}>{item.nmlayanan}</Text>
<Text style={[styles.listtext, { color: "#b4b3b3" }]}> > </Text>
</View>
</TouchableOpacity>
))}
</View>
);
}