I had previously used the following code to retrieve a JSON file containing personal data in my React Native source code:
async componentDidMount() {
try {
const response = await fetch('mydomain.org/personaldata.json');
const responseJson = await response.json();
this.setState({
isLoading: false,
dataSource: responseJson,
});
}
catch (error) {
console.error(error);
}
}
However, I later decided to enhance security by using RapidAPI. Unfortunately, I encountered issues and ended up with a blank page without any data. Here is the modified code:
async componentDidMount() {
try {
const response = await fetch('coin-flip1.p.rapidapi.com/headstails', {
"method": "GET",
"headers": {
"x-rapidapi-host": "mydomain.org",
"x-rapidapi-key": 'lkweruytv43578tv3urhgciuyv2b738465873465c87xnb746'
}
});
const responseJson = await response.json();
this.setState({
isLoading: false,
dataSource: responseJson,
});
}
catch (error) {
console.error(error);
}
}
The code from the RapidAPI documentation that I was trying to implement is as follows:
const fetchData = () => {
startFlip()
setLoading(true);
fetch('https://coin-flip1.p.rapidapi.com/headstails', {
"method": "GET",
"headers": {
"x-rapidapi-host": "coin-flip1.p.rapidapi.org",
"x-rapidapi-key": 'apikey'
}
})
.then((response) => response.json())
.then((json) => setData(json.outcome))
.catch(() => Alert.alert('Something went wrong..', 'There was an error fetching coin flip.'))
.finally(() => {
setLoading(false)
resetFlip()
});
};