I can't return parsing information in React Native

Question

i am a beginner programmist, i have decided to make my first project - weather app. though i have a problem , i cannot bring the parsed info out on screen but if i use console.log the info is shown in console.

i'm doing all these on site: https://snack.expo.io/

                   Copying you the codes and comment inside it console.logs


        **CODE**

 import React, { Component, createElement } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      Image,
      ImageBackground,
      ActivityIndicator,
    } from 'react-native';

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          todos: [],
          isLoading: true,
        };
      }

      componentDidMount = async () => {
        fetch(
          'API'
        )
          .then(res => res.json())
          .then(data => {
            this.setState({ todos: data });

          })
          .catch(error => console.error(error))
          .finally(() => {
            this.setState({ isLoading: false });
          });
      };

      render() {
        const { data, isLoading } = this.state;
        return (
          <View>
          <Text>
          {data.sys.id}
          </Text>
          </View>
        );
      }
    }

    export default App;

Thank you !

Answer 1

I had worked on your code by creating a weather api which is similar to your api and made some changes to the code its working now, check with this code.

This is the weather array iam getting from API, iam also using the weather API as yours

 Object {
    "description": "light intensity drizzle",
    "icon": "09d",
    "id": 300,
    "main": "Drizzle",
  },

code:

import React, { Component, createElement } from 'react';
        import {
          StyleSheet,
          Text,
          View,
          Image,
          ImageBackground,
          ActivityIndicator,
        } from 'react-native';

        class App extends Component {
          constructor(props) {
            super(props);
            this.state = {
              todos: [],
              isLoading: true,
            };
          }

          componentDidMount = async () => {
            fetch(
              'https://samples.openweathermap.org/data/2.5/weather?q=London&appid=439d4b804bc8187953eb36d2a8c26a02'
            )
              .then(res => res.json())
              .then(data => {
                this.setState({ todos: data });
              })
              .catch(error => console.error(error))
              .finally(() => {
                this.setState({ isLoading: false });
              });
          };

          render() {
            return (
                <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
                    <Text>Hello</Text>
                    <Text>
                        {this.state.todos.weather != undefined ? this.state.todos.weather[0].description : null}
                    </Text>
                    <Text>
                        {this.state.todos.weather != undefined ? this.state.todos.weather[0].main : null}
                    </Text>
                </View>
            );
          }
    }

    export default App;

Hope this helps!