0

My app has a button which fetches JSON api results, and updates that in a TEXT field. Works fine.

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

export default class HomeScreen extends Component{
    state = {
        serverJSON: 'not yet downloaded',
    }

    onPress_ServerDownload = () => {
       this.fetchServerJSON();
     }

    fetchServerJSON() {
        return fetch('http://localhost/test.json')
          .then((response) => response.json())
          .then((responseJson) => {
             this.setState({serverJSON: responseJson.myapielement.description});
          })
          .catch((error) =>{
            console.error(error);
          });
      }

    render() {
        return (
            <View>
                <View><Text>Welcome</Text></View>
                <View><Button title="Download Server INIT feed" onPress={this.onPress_ServerDownload} /></View>
                <View><Text>{this.state.serverJSON}</Text></View>
            </View>
        ) 
    } 
}

What I'm struggling with, is abstracting it away to a separate component (separate JS file) which can then be used by various different Screens, and passing a parameter/prop to it, as a query string to the API. Like so:

MainApp

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

export default class HomeScreen extends Component{
    state = {
        serverJSON: 'not yet downloaded',
    }

    onPress_ServerDownload = () => {
       this.fetchServerJSON();
     }

    render() {
        return (
            <View>
                <View><Text>Welcome</Text></View>
                <View><Button title="Download Server INIT feed" onPress={this.onPress_ServerDownload} /></View>
                <View><AsyncComponent /></View>
            </View>
        ) 
    } 
}

Abstracted Component

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

export default class AsyncComponent extends Component{
    state = {
        serverJSON: 'not yet downloaded',
    }

    fetchServerJSON() {
        return fetch('http://localhost/test.json')
          .then((response) => response.json())
          .then((responseJson) => {
             this.setState({serverJSON: responseJson.myapielement.description});
          })
          .catch((error) =>{
            console.error(error);
          });
      }

    render() {
        return (
            <View>
                <View><Text>{record.title}</Text></View>
                <View><Text>{record.description}</Text></View>
            </View>
        ) 
    } 
}

I'd like to be able to instead of targeting the JSON directly, to target http://localhost/api/v1/get.php?query=xxxxx, but I need to pass that xxxxx parameter/prop to the component, so that different Screens can use the same component to query different things.

Many thanks

Jammo
  • 1,021
  • 2
  • 15
  • 32
  • Have you tried returning the response in onPress_ServerDownload? – jStaff Jan 11 '19 at 18:40
  • Instead of using `this.fetchServerJSON` in `onPress_ServerDownload` method, use `AsyncComponent.fetchServerJSON(xxxxxx)`. – rht Jan 11 '19 at 18:44
  • @rht calling `AsyncComponent.fetchServerJSON(xxxxxx)` gives me a red screen of death with : `undefined is not a function (evaluating '_JSONFetcher.default.fetchServerJSON('xxxxx')') ` – Jammo Jan 11 '19 at 19:08
  • `JSONFetcher` is `AsyncComponent` – Jammo Jan 11 '19 at 19:09
  • Use ref for `AsyncComponent` in `HomeScreen` and then call that function using ref – rht Jan 11 '19 at 19:27
  • @rht How would I do that? – Jammo Jan 11 '19 at 20:15
  • ` this.asyncComponent = ref} />`. And in `onPress_ServerDownload`, use `this.asyncComponent.fetchServerJSON()` – rht Jan 11 '19 at 20:35
  • Thanks. I guess I need an `asyncComponent = AsyncComponent.createRef();` or something similar to make a ref/instance ? – Jammo Jan 11 '19 at 21:01

0 Answers0