React Native async fetch JSON, but abstracting to a separate component

Question

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