Реагировать на нативную асинхронную выборку JSON, но абстрагироваться в отдельный компонент

Question

В моем приложении есть кнопка, которая извлекает результаты JSON API и обновляет их в текстовом поле. Работает нормально.

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>
        ) 
    } 
} 

То, с чем я борюсь, это абстрагирование его в отдельный компонент (отдельный файл JS), который затем может использоваться различными экранами, и передача ему параметра / пропуска в виде строки запроса в API. Вот так:

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>
        ) 
    } 
} 

Абстрагированный компонент

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>
        ) 
    } 
} 

Я бы хотел иметь возможность вместо прямого таргетинга на JSON указывать на http://localhost/api/v1/get.php?query=xxxxx, но мне нужно передать этот параметр / реквизит xxxxx компоненту, чтобы разные экраны могли использовать один и тот же компонент для запрашивать разные вещи.

Большое спасибо