Rendering data from fetch request React Native - reactjs

Question

I'm trying to use data from a fetch request but it doesn't load even after some time. How can I get my return function to display the instagram function data? The useEffect hook isn't getting the data to load.
export default function Dashboard(props) {
const [instagram, setInstagram] = useState('');
useEffect(() => {
var url = "https://graph.instagram.com/me/media?fields=media_url,media_type,permalink&access_token=IGQVJHB6RAZDZD"
fetch(url)
.then(response => response.json())
.then((user) => {
console.log("INSTA", user.data);
setInstagram(user.data)
});
},[])
var pics = function(instagram) {
if(instagram){
console.log("found")
instagram.map(function(item, i){
return <li>Pic</li>
})
}
}
return (
<View id="instafeed" style={styles.instagram}></View>
{
pics()
}
</View>
)
}
}

Answer 1

Your pics function doesn't return anything, add this return statement.
var pics = function(instagram) {
if(instagram){
console.log("found")
return instagram.map(function(item, i){
return <li>Pic</li>
})
}
}

Answer 2

Your problem is you re-declare instagram as a parameter of the pics function, then call the pics function without any argument.
The code inside your pics function refers to the instagram from the parameter, not the parent scope instagram and as you called the pics function without any argument, will always be undefined.
To fix your code, either removing instagram parameter of the pics function, or to call pics function with the state.
For example:
...
var pics = function() {
if(instagram){
console.log("found")
instagram.map(function(item, i){
return <li>Pic</li>
})
}
}
...
Or
return (
<View id="instafeed" style={styles.instagram}></View>
{
pics(instagram)
}
</View>
)
I reckon it will be beneficial if you do some research on the topic of Javascript closure and lexical scope.