send parameters with navigation in react-native

Question

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

Are you asking about how to get the navigation parameters (destination_sub_city and origin) inside your order_detail page ? — monsty
– monsty, Commented May 7, 2020 at 16:58
yes bro , and I want to enter these parameters in the URL, How to ? — Harry Wardana
– Harry Wardana, Commented May 7, 2020 at 17:00

monsty · Accepted Answer · 2020-05-07 17:55:48Z

2

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

edited May 7, 2020 at 17:55

answered May 7, 2020 at 17:11

monsty

6334 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

monsty Over a year ago

I don't know which version of React Navigation you are using. The best is to add a console.log(this.props) and you will see what props you have (props.route or props.navigation). You can have a try based on the last edit.

Harry Wardana Over a year ago

my navigation versi 4.3.7

monsty Over a year ago

I updated the code, following the documentation (reactnavigation.org/docs/4.x/navigation-prop).

Harry Wardana Over a year ago

when my console data was undefined

monsty Over a year ago

Have you tried this.props.navigation.getParam('data') ?

Collectives™ on Stack Overflow

send parameters with navigation in react-native

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related