Fecth JSON URL in React Native - react-native

Question

I am trying to obtain the data from this website: https://reactnative.dev/movies.json
I use the following code:
fetch("https://reactnative.dev/movies.json")
.then(response => response.json())
.then((responseJson) => {
setTimeout(() => {
this.setState({
loading: false,
dataSource: responseJson
})
}, 2000)
Alert.alert(responseJson)
})
.catch(error => console.log(error))
return (
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
}
/>
);
};
My problem is that Alert.alert (responseJson) throws the following error:
This error
... and I would like to get the data for the flatlist.
Who helps me, please?
UPDATE:
...
constructor(props) {
super(props);
this.state = {
moviesList: '',
};
}
...
renderScroll = () => {
const { moviesList } = this.state;
fetch("https://reactnative.dev/movies.json")
.then(response => response.json())
.then((responseJson) => {
setTimeout(() => {
this.setState({
loading: false,
moviesList: responseJson.movies
})
Alert.alert(moviesList)
}, 2000)
})
.catch(error => console.log(error))
...
I would like Alert.alert to receive the data. That is to say, get the data out of the fetch function.
If inside the Alert.alert I put responseJson.movies if the data appears, but if I put moviesList it won't
If I post the following in the browser console it sends me an undefined error. I just want to receive the data from outside the function.
fetch("https://reactnative.dev/movies.json")
.then(response => response.json())
.then((responseJson) => {
setTimeout(() => {
this.setState({
loading: false,
moviesList: responseJson.movies
})
}, 2000)
})
.catch(error => console.log(error))
alert(this.moviesList)

Answer 1

You must print your response data by console.log and make sure what the response data is.
According to your error, I think you are getting Object type data after fetching, but you need to assign String into Alert.alert, therefore I suggest you try the following.
Alert.alert(responseJson.title)

Answer 2

I just tested this code it seems to be working. Is that what you are looking for?
with currElement you have access to the filmed object.
import { useEffect, useState } from "react"
function Home() {
const [isLoading, setLoading] = useState(true)
const [data, saveData] = useState([])
useEffect(() => {
fetch("https://reactnative.dev/movies.json")
.then(response => response.json())
.then(responseJson => {
console.log(responseJson.movies)
saveData(responseJson.movies)
setLoading(false)
})
.catch(error => console.log(error))
}, [])
console.log(data)
return isLoading ? (
<p> i am loading</p>
) : (
<ul>
{data.map(currElement => (
<li key={currElement.id}> {currElement.title}</li>
))}
</ul>
)
}