CODEWITHSUNDEEP
reactjsreact-nativenavigationstatenative
Harry Wardana
Harry Wardana

Reputation: 277

send parameters with navigation in react-native

I'm learning to use navigation, I have an order page and an order_detail page on the order page, I create an input form, and I collect the input before it is contributed to the order_detail page

and this is the order page:

 ongNavigationDetail = ()=>{
        let params = {
            origin: this.state.selectOrigin.id_origin,
            destinasi_sub_city : this.state.selectSubDestinasi.id_kecamatan
        }
        // console.log(params)
        this.props.navigation.navigate('orderdetail',{data:params})
    }

in the ongNavigationDetail function, I store the input results into one variable, namely params. consol log results

{"destination_sub_city": "1", "origin": "39"}

and on the order detail page, I want to take the input results from the order page and enter it into the url

page order_detail :

constructor(){
    super();
        this.state = {
            results: [],
    }
}

componentDidMount(){
    this.cekData();
}


cekData= () =>{
        let params = this.props.data; //the results of my order page input here
        const url = 'https://example/price?id_origin=${1}&id_destinasi=${39}'
        fetch(url)
        .then((response)=> response.json())
        .then((responseJson)=>{
        this.setState({
            results: responseJson.data.jenis,
            isLoading : false
        })
    }

the question is how to take input parameters on the order page using state and I enter the URL? here url I use manual values

thanks :)

Upvotes: 0

Views: 282

Answers (1)

monsty
monsty

Reputation: 623

Depending on which version of React Navigation you use :

// Old versions
const { destination_sub_city } = this.props.navigation.state.params;
const destination_sub_city = this.props.navigation.getParam('destination_sub_city');

// Latest version (5.x)
const { destination_sub_city } = this.props.route.params;

For React Navigation v4.x, it would be something like that:

cekData = () => {
  const { 
    destinasi_sub_city,
    origin
  } = this.props.navigation.getParam('data');

  const url = `https://example/price?id_origin=${origin}&id_destinasi=${destinasi_sub_city}`;

  fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        results: responseJson.data.jenis,
        isLoading : false
      });
    });
};

Upvotes: 2

Related Questions