How to get data from fetch inside a function in React Native

Question

I am trying to fetch data from external api and show that on display. When I press button it calls function which console things normally but can't show returned value.

export default function HomeScreen() {  
  return (
    <View style={styles.container}>
      <Button title='show data' onPress={loadText}/>
      <Text>{loadText}</Text>
    </View>
  );
  function loadText(){
    fetch('http://192.168.88.253:5000/read')
      .then((response) => response.json())
      .then((responseJson) => {
        return (
          console.log(responseJson.city)
        );
      })
      .catch((error) => {
        console.error(error);
      });
  }
}

If I understand it, loadText function must return responseJson.city value as a string. How can I show it in <View> or <Text>?

Is it intended to return `console.log(responseJson.city)`? You have also to call the function like `{loadText()}`. And add return responseJson.city without the console.log. — Burak Ayyildiz, Jan 27 '20 at 15:06
Are you asking how to show the response value as text in the view? If so you really should go over the basics of react / react-native. https://facebook.github.io/react-native/docs/tutorial The topic that covers state will be particularly useful here — wizloc, Jan 27 '20 at 15:10

score 2 · Answer 1 · answered Jan 27 '20 at 16:09

2

export default function HomeScreen() {  
  constructor(props){
    super(props);
    this.state = {
      city: ''
    }
  }
  return (
    <View style={styles.container}>
      <Button title='show data' onPress={() => this.loadText()}/>
      <Text>{this.state.city}</Text>
    </View>
  );
 loadText(){
    fetch('http://192.168.88.253:5000/read')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({city: responseJson.city});
      })
      .catch((error) => {
        console.error(error);
      });
  }
}

answered Jan 27 '20 at 16:09

Shing Ho Tan

931
11
30

Thank you, but I am still getting an error expected ";" in constructor row? Looks like it recognizes constructor as const (or it wants to recognize it like that). – jorganinho Jan 27 '20 at 19:44
you should put ';' after this.state means this.state = { city: ''}; – Shing Ho Tan Jan 28 '20 at 00:39

score 0 · Answer 2 · answered Jan 27 '20 at 16:23

you can use alert() to display the data.

alert is the popup which will be displayed on the mobile screen.

export default function HomeScreen() {  
  return (
    <View style={styles.container}>
      <Button title='show data' onPress={loadText}/>
      <Text>{loadText}</Text>
    </View>
  );
  function loadText(){
    fetch('http://192.168.88.253:5000/read')
      .then((response) => response.json())
      .then((responseJson) => {
        return (
          alert(JSON.stringfy(responseJson.city))
        );
      })
      .catch((error) => {
        alert(JSON.stringfy(error));
      });
  }
}

Thank you, it works perfectly but I want to show data in Text or FlatList component. Looks like it recognizes constructor as const (or it wants to recognize it like that). — jorganinho, Jan 27 '20 at 19:45

How to get data from fetch inside a function in React Native

2 Answers2