How to get data from Api in TextInput use on React Native?

Question

I have some issues with TextInput when getting the data from API when calling the function I'm declaring it to fetch the API and get the data Depending on the input

I have a warning like

can't find variable searchInput

and I'm defining the search input in the state and put them to the value of the input, I think the code is right or what?

Code

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  LinearGradient,
  ActivityIndicator,
  TouchableOpacity
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

export default class Search extends Component {
  constructor() {
    super();
    this.ApiKey = "****";
    this.state = {
      searchInput: "",
      searchResult: null,
      error: "",
      isLoading: false
    };
  }

  searchCity = async () => {
    this.setState({
      isLoading: true
    });
    const url = `http://api.openweathermap.org/data/2.5/weather?q=${searchInput}&units=metric&appid=${
      this.ApiKey
    }`;
    await fetch(url)
      .then(res => res.json())
      .then(responseJson =>
        this.setState({
          isLoading: false,
          searchResult: {
            name: responseJson.name,
            country: responseJson.sys.country,
            main: responseJson.weather[0].main,
            description: responseJson.weather[0].description,
            temp: responseJson.main.temp
          }
        })
      )
      .catch(error => this.setState({ error }));
  };

  render() {
    const { searchInput, searchResult, isLoading, error } = this.state;

    if (!isLoading) {
      return (
        <View
          style={{
            backgroundColor: "#2b3654",
            flex: 1,
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          {isLoading && <Text style={styles.Text}> Loading...</Text>}
          <ActivityIndicator size="large" color="00ff00" />
        </View>
      );
    } else if (error) {
      return (
        <View>
          <Text>{error}</Text>
        </View>
      );
    }
    if (searchResult) {
      return (
        <LinearGradient colors={["rgba(0,0,0,0.05)", "rgba(0,0,0,0)"]}>
          <View>
            <Text>{searchResult.name}</Text>
            <Text> {searchResult.main}</Text>
            <Text> {searchResult.description}</Text>
            <Text> {searchResult.temp}</Text>
          </View>
        </LinearGradient>
      );
    } else {
      return (
        <View style={styles.container}>
          <View style={styles.searchSection}>
            <TouchableOpacity onPress={this.searchCity}>
              <Icon
                style={styles.searchIcon}
                name="ios-search"
                size={15}
                color="#fff"
              />
            </TouchableOpacity>
            <TextInput
              style={styles.input}
              placeholder="Find Your City.."
              placeholderTextColor="#fff"
              underlineColorAndroid="transparent"
              autoCapitalize="none"
              onChangeText={searchInput => {
                this.setState({ searchInput });
              }}
              onSubmitEditing={this.searchCity}
              value={searchInput}
            />
          </View>
        </View>
      );
    }
  }
}

Paul Fitzgerald · Accepted Answer · 2018-12-23 15:00:03Z

1

You need to use this.state.searchInput

The line should be:

const url = `http://api.openweathermap.org/data/2.5/weather?q=${this.state.searchInput}...`;

answered Dec 23, 2018 at 15:00

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

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

Comments

Sarmad Shah · Accepted Answer · 2018-12-23 15:02:26Z

0

The problem is in your URL, you have used searchInput there... use this.state.searchInput or you can use destructuring

const { searchInput } = this.state;

const url = `http://api.openweathermap.org/data/2.5/weather?q=${searchInput}&units=metric&appid=${
          this.ApiKey
        }`;

answered Dec 23, 2018 at 15:02

Sarmad Shah

3,8053 gold badges25 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to get data from Api in TextInput use on React Native?

Code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related