On Press of a button I need to pass params to another screen where value of that button is fetched, code below;
screen:1
<TouchableOpacity
onPress={() => navigation.navigate("Quiz", { fetch: "history" })}
style={styles.button}
>
<Text style={styles.buttonText}>History</Text>
</TouchableOpacity>
screen:2
const Quiz = ({ navigation, route }) => {
const { fetch } = route.params;
const getQuiz = async () => {
setIsLoading(true);
const url = `https://herokuapp.com/q/${fetch}`;
const res = await fetch(url);
const data = await res.json();
setQuestions(data.results);
setOptions(generateOptionsAndShuffle(data.results[0]));
setIsLoading(false);
};
But during the fetching I get the following error
[Unhandled promise rejection: TypeError: fetch is not a function. (In 'fetch(url)', 'fetch' is "history")]
I have tried using timeout but that is not working, is there a better option.
The issue is that fetch is a native function in javascript (see here).
You should rename the param to another name like quizz.
screen:1
<TouchableOpacity
onPress={() => navigation.navigate("Quiz", { quizz: "history" })}
style={styles.button}
>
<Text style={styles.buttonText}>History</Text>
</TouchableOpacity>
screen:2
const Quiz = ({ navigation, route }) => {
const { quizz } = route.params;
const getQuiz = async () => {
setIsLoading(true);
const url = `https://herokuapp.com/q/${quizz}`;
const res = await fetch(url);
const data = await res.json();
setQuestions(data.results);
setOptions(generateOptionsAndShuffle(data.results[0]));
setIsLoading(false);
};