как обрабатывать скрипт в отдельном компоненте в React native

Question

Я хочу написать все вызовы API в отдельном компоненте и макет в отдельном компоненте. Как я могу сделать это в React native ниже при записи моего текущего кода

в приведенном ниже коде я пишу два компонента API Call Personal Info, но я хочу управлять этим на отдельном компоненте, который этот компонент включает в личную информацию

export default class PersonalInfo extends React.Component {
  constructor(props) {
    super(props)
}

 async Participant(){
    const LoginUserID = await  AsyncStorage.getItem('LoginUserID');
    var FamilyMembers=[];
    var url = `http://testing.njtennis.net/api/Customers/GetFamilyMembers?familyMemberID=${LoginUserID}`;
    fetch(url, {
     method: "GET",
  })
     .then(response => response.json())
     .then(responseJson => {

      for (let userObject of responseJson) {

        FamilyMembers.push({ label: userObject.Name   , value: userObject.Value });
      }

      this.setState({
        Participantdata: FamilyMembers 
       })

      }
     ).catch(error => {

      });
  }
  async GetSuffix(){
Api Call

   }

  componentDidMount(){
    this.Participant()
    this.GetSuffix()

  }
  render() {

    return (
<View style={styles.container}>
        <View style={{ flex: 1, marginTop: '10%' }}>
          <ScrollView>
            <View style={styles.inputContainer}>

              <View style={styles.inputInnerContainer}>

                <Dropdown
                  value={this.state.Participant}
                  data={this.state.Participantdata}
                  placeholder='Please select participant'
                  pickerStyle={{ borderBottomColor: 'transparent', borderWidth: 0 }}
                  dropdownOffset={{ 'top': 0 }}
                  containerStyle={{ width: '100%', marginRight: '10%' }}
                  onChangeText={(Participant) => { this.FamilyMembers(Participant) }}
                />
              </View>
              <View >

                {
                  this.state.error['Participant'] && <Text style={styles.ErrorMessage}>{this.state.error['Participant']}</Text>
                }
              </View>
            </View>

            <View style={styles.inputContainer}>

              <View style={styles.inputInnerContainer}>


                <TextInput style={[styles.inputs, { width: '70%', marginRight: '1%' }]}
                  placeholder="First Name"
                  value={this.state.FirstName}
                  underlineColorAndroid='transparent'
                  onChangeText={(FirstName) => this.setState({ FirstName })}
                />

                <TextInput style={{ width: '30%', height: 45, marginBottom: 20, backgroundColor: '#ECEDEB' }}
                  placeholder="Initail"
                  value={this.state.Initail}
                  underlineColorAndroid='transparent'
                  onChangeText={(Initail) => this.setState({ Initail })}
                />




              </View>
              <View >
                {
                  this.state.error['FirstName'] && <Text style={styles.ErrorMessage}>{this.state.error['FirstName']}</Text>
                }
              </View>
            </View>
            <View style={styles.inputContainer}>
              <View style={styles.inputInnerContainer}>
 <Dropdown
               style={styles.inputs}
                  value={this.state.Suffix}
                  data={this.state.SuffixData}
                  placeholder='Please select suffix'
                  pickerStyle={{ borderBottomColor: 'transparent', borderWidth: 0  }}
                  dropdownOffset={{ 'top': 0 }}
                  containerStyle={{ width: '30%'   }}
                  onChangeText={(Suffix) => { this.FamilyMembers(Suffix) }}
                />
              </View>
              <View >
                {
                  this.state.error['LastName'] && <Text style={styles.ErrorMessage}>{this.state.error['LastName']}</Text>
                }
              </View>
            </View>

 </ScrollView>

        </View>
      </View>


    );

  }

}

любой может подсказать мне, как с этим обращаться