Addressing React Native Rendering Problems

I'm currently working on a weather application and facing some challenges with rendering the forecast. I'm uncertain whether it's related to the styling. I've tested the API call through the browser and encountered no errors in Android Studio.

App.JS

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
import Forecast from './components/Forecast';
import Weather from './components/Weather'

class WeatherApp extends Component {
  constructor(props){
    super(props);
    this.state = { 
    // setting the state to an empty string while keeping the forecast null 
      zip: "",
      forecast: null
    };
  }
  _handleTextChange = event => {
    // this function handles the text change when typing in a zip
    let zip = event.nativeEvent.text;
    Weather.fetchForecast(zip).then(forecast => {
      this.setState({forecast: forecast})
    })
  }
  render() {
    let content = null;
    if(this.state.forecast !== null) {
      content = (
        <Forecast 
          main = {this.state.forecast.main}
          description = {this.state.forecast.description}
          temp = {this.state.forecast.temp}
        />
      )
    }
  return (
    <View style = {styles.container}>
      <Text style = {styles.welcome}>
        Please Input {this.state.zip}
      </Text>
      <TextInput
        style = {styles.input}
        onSubmitEditing={this._handleTextChange}
      />
    </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#666666',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  input: {
    fontSize: 20,
    borderWidth: 2,
    padding: 2,
    height: 40,
    width: 100,
    textAlign: 'center'
  },
});

export default WeatherApp;

This is my forecast.js file intended to display the forecast after the state is set.

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

// component to render forecast based on zip code
class Forecast extends Component {
    render(){
        return(
            <View style = {styles.container}>
                <Text style = {styles.bigText}>
                    {this.props.main}
                </Text>
                <Text style = {styles.mainText}>
                    Current condition:
                    {this.props.description}
                </Text>
                <Text style = {styles.bigText}>
                    {this.props.temp}
                </Text>
            </View>
        );
    }
};

const styles = StyleSheet.create({
    container: { height: 130 },
    bigText: {
        flex: 2,
        fontSize: 20,
        textAlign: "center",
        margin: 10,
        color: "#FFFFFF"
    },
    mainText: {
        flex: 1,
        fontSize: 16,
        textAlign: "center",
        color: "#FFFFFF"
    }
});

export default Forecast;

In the React DevTools, I'm unable to see the component render or display. Could this be due to improper usage of flexbox styling?

Answer №1

In your code, you define the content as a Forecast component, but fail to use it in your render().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to customize the pagination dots in react-native-swiper-flatlist?

Is it possible to customize the pagination dots style for react-native-swiper-flatlist? <View style={styles.container}> <SwiperFlatList autoplay={false} autoplayLoop={false} index={0} showPagination ...

When using jQuery, the PHP variable value is not retrieved from the DIV data-id attribute, instead it just displays the variable name

I currently have the following code: <div class= "obutton feature2" data-id=".$bookID."><button>Reserve Book</button></div> <div class="modal-box"></div> Although this button triggers the jQuery script, the modal box ...

In what way can the border of a particular button be altered upon clicking by utilizing useState within Material UI?

I am facing a challenge with creating emphasis on an active button among three buttons. The desired outcome is to display a border color around the active button right after it is clicked, while keeping the unclicked buttons neutral until they are selected ...

Opacity error with jQuery slider specifically affecting Google Chrome browser

My Magento site features a custom-built slider that is both responsive and has unique touch behavior. The desired behavior for the slider is as follows: A three-image slider where the middle image has an opacity of 1.0, while the other two images have an ...

When certain triggers are activated, a hidden textbox revealed through javascript is made visible

After changing a dropdown value (from ddlSource) and hiding some text boxes using JavaScript, everything works fine. However, when the user enters a certain value in another textbox triggering an AJAX call to populate some labels, upon form reload, the hid ...

Jquery scripts seem to have a hit-or-miss success rate

Recently, I added a couple of Jquery scripts in my header to handle the fading in of a specific CSS class and scrolling down another one. Both of these classes are initially set to display: none in CSS, with Jquery responsible for making them visible. Here ...

Transferring information from Broadcast Receiver to Fragment in Android

I've been struggling to update a variable in my fragment every 24 hours using a broadcast receiver. Despite conducting extensive research, I can't figure out how to update the variable data. The function I'm using to set up the alarm for ev ...

Encountering the error message "Unexpected token. Did you mean {'>'} or &gt;?" when trying to use an arrow function in React

I recently started learning React and Javascript. I encountered an error message that said: "Unexpected token. Did you mean {'>'} or &gt;?", specifically in relation to the "=>" part of the code below. This issue arose while I was worki ...

Error in Vue class-based component: Unable to access property 'message' due to its value being null

I am currently exploring the combination of typescript and Vue for the first time in my project. I am encountering an issue that seems to be related to scope, but I could be mistaken. I referenced a small example from VueJS and adapted it as shown below: ...

Could an element's loading be postponed on the initial page a user lands on?

One of my clients has requested a live chat system to be added to their website. I am fully capable of implementing it, and it is included through a script tag. Additionally, they have asked for a slight delay before the chat system loads in. My initial t ...

Issue: unable to establish a connection to 127.0.0.1:465 to send an email

When attempting to send smtp alert messages from my site's email account <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55363a3b2134362115383a3b263c21307b363">[email protected]</a> to the email addresses of m ...

Ways to change the chart type in ApexCharts

I'm seeking a way to change the chart type of an existing ApexCharts that has already been rendered. After reviewing the methods, I attempted to use the updateOptions() method, but encountered the error: Uncaught TypeError: Cannot read property &apos ...

Create a Boxplot chart using Chart.js that dynamically adjusts the minimum and maximum values to allow for additional space on either

I am utilizing chartjs v2.9 for creating a boxplot and my code structure is as follows: function generateRandomValues(count, minimum, maximum) { const difference = maximum - minimum; return Array.from({length: count}).map(() => Math.random() * ...

Whenever I use jQuery to dynamically add a new form input, the Select2 input fails to function properly

For my form, I'm attempting to dynamically add a new form-row each time the user clicks the add button. <div class="form-row mb-2"> <div class="form-group col-md-3 my-2"> <label>File</label> ...

Adjust input width based on content in VueJS

Is it possible to achieve the following using (Pug & CoffeeScript): input(placeholder="0", v-model.number="order[index]" v-on:change="adjustInput") ... adjustInput: -> event.target.style.width = event.target.value.length + 'ch' Even ...

What is the best way to update a canvas chart when the side menu is hidden?

I am facing an issue with the layout of my webpage, which includes a left side menu and a canvas chart. The left side menu occupies the first 155 pixels of the width, leaving the rest for the canvas chart set to a width of 100%. However, when I close the ...

Decoding deeply nested JSON data using JavaScript

After browsing through countless threads on the topic, I have yet to find a solution. I successfully parsed a JSON response that looks like this: { "1": { "id": "1", "name": "Fruit", . . . "entities": { ...

implementing AJAX functionality in Laravel when a drop-down item is selected

Hello there, I am a newcomer to the world of coding and I'm currently learning Laravel for a personal project. My goal is to retrieve data from a database based on the selection made in a dropdown menu. Here's the code for the dropdown menu: < ...

Exploring an array using bluebird promises

I am currently facing an issue where I need to iterate over an array containing promises. My goal is to multiply all the values in the array by 2 and then return the updated array: var Bluebird = Promise.noConflict(); var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9 ...

The onchange() function for a multi-checkbox dropdown is failing to work as

Issue with Multiple Drop Down Checkbox Functionality: The first parameter is always received as undefined, and the onchange event only captures the value of the first checkbox selected. <select name="multicheckbox[]" multiple="multiple" class="4colacti ...