CODEWITHSUNDEEP
reactjsreact-native
Dina
Dina

Reputation: 111

on press take the id and display the name of this id react native

i have 2 api

first api: http://myIP/api/scategories

that contain 'id_scategories' and 'name_scategories' and i use this api to dispaly all 'name_scategories' in react native by fetch data

second api : http://myIP/api/services/{id_scategories}

that contain 'service_id' , 'service_name' , 'id_scategories'

now i want to do this function :

onPress in the 'name_scategories' that displayed in react native take the id of this name and diplay all services of this id in another page

how can i do this?

and here is the code 

componentDidMount(){
    return fetch('http://myIP/api/scategories')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson.data,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

ON RETURN

<FlatList
          data={this.state.dataSource}
       renderItem={({item}) =>
  <TouchableOpacity  onPress= {() => navigate('service')}>
<View>
<Text>{item.name_scategories}</Text>
</View></TouchableOpacity>

Upvotes: 0

Views: 1764

Answers (1)

Ali SabziNezhad
Ali SabziNezhad

Reputation: 3118

After fetch API 1, this.state.dataSource is an array of [id_scategories, name_scategories]. you can use this:

<FlatList
      data={this.state.dataSource}
      renderItem={({item}) =>
           <TouchableOpacity onPress= {() => navigate('service', {id:item.id_scategories})}>
               <Text>{item.name_scategories}</Text>
           </TouchableOpacity>
      }
/>

in service you can get id_scategories and fetch the second API like this.

componentDidMount(){
    let id_scategories = navigation.getParam('id', 0);
    return fetch('http://myIP/api/scategories/' + id_scategories)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          services: responseJson.data,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

Now, you can show this.state.services in a Flatlist. I did not run this code and it may have some syntax errors... I hope this can help you.

Upvotes: 2

Related Questions