How to dynamically Load API Data on a button Click in React Native

I am a starter in React Native. I have an API that dynamically displays the number of levels on a page. Every time the user clicks on the button, I want to fetch an API and navigate to another page. I have defined three on click events for this, but I want to clean up my code and write with the help of one OnClick event.

My levels are as follows

//Level1
async Level1() {
const datavalue = await getResultValue('url1');
this.props.navigation.navigate('Final','getSomething');
}
//Level2
async Level12() {
const datavalue = await getResultValue('url2');
this.props.navigation.navigate('Final','getSomething');
}
//Level3
async Level3() {
const datavalue = await getResultValue('url3');
this.props.navigation.navigate('Final','getSomething');
}


Each an every level, there is a corresponding API. Is there a way I can achieve it with the help of One OnClick Event?

Any help would be appreciated. Thank you in advance.

onClick

level[n]

ternary operation

1 Answer
1

async navigateToFinalScreen(params){
data = await fetch(params.url);
this.props.navigation.navigate(params.screenToNavigate, 'getSomething');
}


/* calling This method */

this.navigateToNextScreen(
{ url:"url",
screenToNavigate:"Final" }
)


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.