A bit confuse about react ContextAPI passing an array state - react-native

Question

Code updated but still has the issue
I am trying to implement React Context API in a React native App, i have my array of data in the useEffect console.log but the .map not showing anything on screen/not rendering any error either. I'm out of idea to solve this problem so i come here for help.
this is my app.js file where i create the context
import React, {useState} from 'react';
import { StyleSheet } from 'react-native';
import Page1 from './Page1';
export const BurgerContext = React.createContext()
export default function App() {
const [burgerDataBase,setBurgerDataBase] = useState([
{name:'Big Tasty', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Mac', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Tasty', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Mac', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Tasty', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
{name:'Big Mac', url:'https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg', price:'4.90',desc:'',brand:'Mc Donald'},
])
return (
<BurgerContext.Provider value={{burgerDataBase, setBurgerDataBase}}>
<Page1/>
</BurgerContext.Provider>
);
}
this is my page1 screen where i want to get the data form context and map on them
import React, {useState, useEffect, useContext} from 'react'
import {BurgerContext} from './App'
import { Text,View } from 'react-native'
import styles from './styles'
export default function Page1() {
const [isLoading,setIsLoading] = useState(true)
const [page,setPage] = useState(1)
const {burgerDataBase} = useContext(BurgerContext)
useEffect(() => {
//change loading state after a settimeout function here
console.log('--------------------START OF BURGERBASE PAGE1-----------------------')
console.log(burgerDataBase) // i have my data as an array in my console here
console.log('---------------------END OF BURGERBASE PAGE1----------------------')
setTimeout(() => {
setIsLoading(false)
}, 1500);
}, [burgerDatabase])
const dataToShow = burgerDataBase.map(function(item,i){
<Text>{item.url}</Text>
})
if(isLoading){
return(
<View>
<Text>Loading ...</Text>
</View>
)
}
if(page === 1){
return (
<View style={styles.container}>
<View style={styles.page1body}>
<Text onPress={() => setPage(2)}>Go to Page 2.</Text>
{dataToShow}
</View>
</View>
)}
if(page === 2){
return(
<PageFav data={burgerDataBase}/>
)
}
}

Answer 1

App.js with fixed Context definition:
import React, { useState } from "react";
import Page1 from "./Page1";
export const BurgerContext = React.createContext();
export default function App() {
const [burgerDataBase, setBurgerDataBase] = useState([
{
name: "Big Tasty",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Mac",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Tasty",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Mac",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Tasty",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
},
{
name: "Big Mac",
url:
"https://www.hamburgerfinder.fr/wp-content/uploads/McDonalds-Big-Tasty.jpg",
price: "4.90",
desc: "",
brand: "Mc Donald"
}
]);
return (
<BurgerContext.Provider value={{ burgerDataBase, setBurgerDataBase }}>
<Page1 />
</BurgerContext.Provider>
);
}
Page1.js (without import styles from './styles')
import React, { useState, useEffect, useContext } from "react";
import { BurgerContext } from "./App";
import { Text, View } from "react-native";
export default function Page1() {
const [isLoading, setIsLoading] = useState(true);
const [page, setPage] = useState(1);
const { burgerDataBase } = useContext(BurgerContext);
useEffect(() => {
//change loading state after a settimeout function here
console.log(
"--------------------START OF BURGERBASE PAGE1-----------------------"
);
console.log(burgerDataBase); // i have my data as an array in my console here
console.log(
"---------------------END OF BURGERBASE PAGE1----------------------"
);
setTimeout(() => {
setIsLoading(false);
}, 1500);
}, [burgerDataBase]);
const dataToShow = burgerDataBase.map((item, index) => (
<Text key={index}>{item.url}</Text>
));
if (isLoading) {
return (
<View>
<Text>Loading ...</Text>
</View>
);
}
if (page === 1) {
return (
<View>
<View>
<Text onPress={() => setPage(2)}>Go to Page 2.</Text>
{dataToShow}
</View>
</View>
);
}
}

Answer 2

Your dataToShow is called only one time, when it's first mounted that time loading was showing. after loading completed you set to re render item but only when there is change in burgerDatabase (inside array of use effect) but burgerDatabase is not changing at all so rendering is not working
change like this.
create empty state of array
store burgerDatabase in state which you created in step 1, (inside timeout where loading is false)
now when loading is set to false, that time burger new state is set and it will re render.
use newly created state to render items.

Answer 3

The final solution was to return what was inside the map and not forget to add inside the useEffect [burgerDataBase]. Both combined made it works , thx everyone !