React Native display simple Json Data

I am trying to create a simple page, in which I want to display the data i get from the Json file. Unfortunately I get "Invariant Violation: Objects are not valid as a React child (found: object with keys {ts, trend, baro, temp, hum, wind, rain, et, forecast, sun}). If you meant to render a collection of children, use an array instead."

So it loads the Json but I cant display the data. If tried various methods, but couldnt solve it.

App.js

import React from 'react'
import { AppRegistry, StyleSheet, FlatList, Text, View, Alert, ActivityIndicator, Platform} from 'react-native'

export default class Planner extends React.Component {
constructor(props)
{

super(props);

this.state = {
isLoading: true
}
}

componentDidMount() {

return fetch('url')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}

FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#607D8B",
}}
/>
);
}

render() {

if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}

return (

<View>

data ={ this.state.dataSource }

renderItem={({item}) => <Text > {item.temp.out.c} </Text>}

keyExtractor={(item, index) => index}

</View>

);
}
}


Json

{
"ts": 1530290929,
"trend": {
"val": -20,
"text": "langsam fallend"
},
"baro": 1010.4310482000001,
"temp": {
"out": {
"f": 85.9,
"c": 29.9
}
},
"hum": {
"out": 29
},
"wind": {
"speed": {
"mph": 5,
"kmh": 8
},
"avg": {
"mph": 3,
"kmh": 4.8
},
"dir": {
"deg": 58,
"text": "ONO"
}
},
"rain": {
"rate": 0,
"storm": 0,
"day": 0,
"month": 100.33,
"year": 451.358
},
"et": {
"day": 176,
"month": 480,
"year": 1673
},
"forecast": {
"val": 6,
"rule": 45,
"text": "Zunehmend wolkig bei gleichbleibender Temperatur."
},
"sun": {
"uv": 1.3,
"rad": 322,
"rise": "4:25",
"set": "20:37"
}
}


Thanks in advance!

You're passing your props to <View> as children. They should appear like HTML attributes. <View data={}>.
– mccambridge
Jun 29 at 18:06

<View>

<View data={}

1 Answer
1

I think you are trying to pass props to View. To do it correctly, change your code to

View

<View data ={ this.state.dataSource }
renderItem={({item}) => <Text > {item.temp.out.c} </Text>}
keyExtractor={(item, index) => index}/>


The error is gone :). But now the screen is blank.
– H_Dogma
Jun 29 at 18:26

@H_Dogma Now you need to use the developer tools in your favorite browser. Be sure to install the React extension/addon so that you can inspect the component hierarchy, props, and state.
– Code-Apprentice
Jun 29 at 18:43

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.