How do I get my api data to display as a single item instead of printing vertically letter by letter? - react-native

Question

I am starting to grasp fetch and using an API but I am trying to refer to a code source that used currencies and applying it to my own version but using an API that returns a random activity. The project I am using to better grasp my understanding is react-native expo cli
What I want it to do:
Press the search button -> returns random activity to do.
Currently, it is doing this but because my old API returns an array of objects for different currencies and my current random activity API returns just one activity I believe this is why my formatting is off but after reading and trying out different .then actions I can't seem to understand fully how to display my random activity properly instead of the multiple lines of the same activity I am currently getting I want it to display only once. (My prior question had the letters vertical which I have since fixed).
here is the link for the API i want to use https://www.boredapi.com/
here is the link for the old API https://open.er-api.com/v6/latest/USD
Thanks!
import { StyleSheet, Text, View, FlatList, SafeAreaView, Button, ScrollView } from 'react-native';
import { useEffect, useState } from 'react';
const Item = ({ item }) => {
return(
<View>
<Text>{item.value}</Text>
</View>
)
}
export default function App() {
const [data, setData] = useState([]);
var searchForActivity = () => {
fetch('http://www.boredapi.com/api/activity/')
.then((res) => res.json())
.then((json) => {
var array = Object.keys(json.activity).map((key) => ({
value: json.activity,
}));
setData(array);
});
}
useEffect(() => {
searchForActivity();
}, []);
return (
<SafeAreaView>
<ScrollView>
<View style={styles.container}>
<Text>Welcome to Activity Finder</Text>
<FlatList data = {data} renderItem={Item} />
<Button title='Search' onPress={searchForActivity} />
<StatusBar style="auto" />
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

Your api call returns a single object like this
{
"activity": "Write a list of things you are grateful for",
"type": "relaxation",
"participants": 1,
"price": 0,
"link": "",
"key": "2062010",
"accessibility": 0
}
Since your data is not going to be an array you should change the data initial state to something like null.
const [data, setData] = useState(null);
You're currently looping over the keys of the activity property, which are just indices. Then map over all the keys and return an object with the property value which just has the json.activity. This does not make any sense. You can set the json directly to the state like this since you don't need an array if you only want to display one activity.
var searchForActivity = () => {
fetch("http://www.boredapi.com/api/activity/")
.then((res) => res.json())
.then((json) => {
setData(json);
});
};
By this point you can't use FlatList anymore since you data in not an array anymore, in your App you should change the FlatList with the Item component you made.
return (
<SafeAreaView>
<ScrollView>
<View style={styles.container}>
<Text>Welcome to Activity Finder</Text>
<Item item={data} />
<Button title="Search" onPress={searchForActivity} />
<StatusBar style="auto" />
</View>
</ScrollView>
</SafeAreaView>
);
Note that in your Item component you use a value property. This property does not exists on the data you get back from the api and should be changed to activity for it to show the name of the activity.
<Text>{item.value}</Text>
// change value with activity
<Text>{item.activity}</Text>