React Native display simple Json Data

Question

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
– mccambridge, Commented Jun 29, 2018 at 18:06

Code-Apprentice · Accepted Answer · 2018-06-29 18:08:41Z

0

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

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

answered Jun 29, 2018 at 18:08

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Code-Apprentice Over a year ago

@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.

Collectives™ on Stack Overflow

React Native display simple Json Data

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related