React Native - how to use map function on an object - react-native

Question

I'm creating an APP that get some data from fetch function. No problem here. The array has the data correctly. I'm doing it like this:
constructor(){
super()
this.state = {
fetching: false,
api: []
}
}
componentWillMount(){
this.setState({ fetching: true })
api.getMonuments().then(res => {
this.setState({
api: res,
fetching: false
})
})
}
I got this data: an array of 4 objects
Then I want to pass that data to another scene. I'm doing it like this:
<View style={styles.contentContainer}>
<TouchableHighlight
style={[styles.button, {marginBottom:0}]}
onPress={() => navigate('Monumento', this.state.api)}
underlayColor='#000'
>
<View style={styles.buttonContent}>
<Animatable.Text
style={styles.buttonText}
animation="bounceInLeft"
duration={1500}
>
Click here!
</Animatable.Text>
</View>
</TouchableHighlight>
</View>
On the other scene I get that data with the navigation.state.params but the problem now is that there is no more an array with 4 objects in it, but instead there is an object that have 4 objects in it...if I console log the data that is what's appears
render(){
const api = this.props.navigation.state.params;
console.log('API:', api)
...
Now I want to use the map function but I can't because 'api' is not a function...How can I workaround this?

Answer 1

render(){
var api={"bar":"nihao"};
return(
<View>
{Object.entries(api).map(([key,v])=>{
return <View key={key}><Text>{v}</Text></View>
})}
</View>
)
}
api is a single object not array.
api is a array.
render(){
var api=[{"bar":"nihao"},{"bar":"nihao2"},{"bar":"nihao3"}];
return(
<View>
{api.map((v,index)=>{
return <View key={index}><Text>{v.bar}</Text></View>
})}
</View>
)
}

Answer 2

You can use Object.entries with RN for mapping the key/value pairs of an object. Eg:
const api = { 'foo': 'bar', 'foz': 'baz'};
...
render() {
return (
Object.entries(api).map(([key, value]) => {
return <View key={key}>{value}</View>
});
)
}

Answer 3

The issue is you are accessing params object, but what you want is api array. I guess you are using react navigation. If so, then your call to navigate function should be like this:
navigate('Monumento', {api: this.state.api}).
And you can retrieve it like this:
this.props.navigation.state.params.api.
Navigate function takes screen name and params object.
Read this: https://reactnavigation.org/docs/navigators/navigation-prop#navigate-Link-to-other-screens