A bit confuse about react ContextAPI passing an array state

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}/>
        )
    }
}

You don't need the object you passed into the React.createContext(). Also, when passing value you should pass in like: value={{ burgerDataBase, setBurgerDataBase }}. Then you can get your data by destructing the object! — Nano Adam
– Nano Adam, Commented Nov 10, 2020 at 13:00
thx for the anwser ,what you mean by destructuring the object?something like const [burgerDataBase,setDataBase] = useContext({BurgerContext})? — Arnaud Rey
– Arnaud Rey, Commented Nov 10, 2020 at 13:13
Like const {burgerDataBase, setBurgerDataBase} = useContext(BurgerContext) — Nano Adam
– Nano Adam, Commented Nov 10, 2020 at 13:23
ok did the 3 modification, but still has same issue, only my <Text> Go to page 2</Text> is showing, i still have my array in console.log of the useEffect, i still dont get how can i have my array in the useEffect and a map that render nothing in {dataToShow}... i even tryed to put burgerDataBase in the useEffect [ ] so it would update when state update but not working either. — Arnaud Rey
– Arnaud Rey, Commented Nov 10, 2020 at 13:33

Michael S. Molina · Accepted Answer · 2020-11-10 13:43:32Z

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>
    );
  }
}

answered Nov 10, 2020 at 13:43

Michael S. Molina

7325 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arnaud Rey Over a year ago

is it working for you ? cause for me its not , updated my code

Michael S. Molina Over a year ago

@ArnaudRey I created a sandbox - codesandbox.io/s/dank-wildflower-3v3zu?file=/src/Page1.js

Michael S. Molina Over a year ago

@ArnaudRey To make your new code work you should add a return inside burgerDataBase.map. Like this: return <Text key={index}>{item.url}</Text>. And also change burgerDatabase to burgerDataBase in the effect condition.

Arnaud Rey Over a year ago

thx it works with the codesandbox code from Michael S.molina !!!

user8119020 · Accepted Answer · 2020-11-10 15:26:15Z

0

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.

answered Nov 10, 2020 at 15:26

user8119020

1173 bronze badges

Comments

Arnaud Rey · Accepted Answer · 2020-11-10 16:53:18Z

0

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 !

answered Nov 10, 2020 at 16:53

Arnaud Rey

256 bronze badges

Collectives™ on Stack Overflow

A bit confuse about react ContextAPI passing an array state

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related