What do I do wrong when I use createContext(), and useContext()?

Question

I can do this without using createContext(), and useContext(). But I want to learn to use this, so I want to add useContext, and createContext.

Normaly i have this code in my MainScreen.js

 const [users, setUsers] = useState([
        <HorizontalCircles skeleton={true} key={0} colorFirst={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} colorSecond={"rgb(" + 100 + "," + 100 + "," + 100 + ")"}/>,
        <HorizontalCircles skeleton={true} key={1} colorFirst={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} colorSecond={"rgb(" + 100 + "," + 100 + "," + 100 + ")"}/>,
    
      ])
    const getUsers = () => {
        // TODO: get discussion from SERVER
        // Dumy Data
        console.log("Getting Users");
    
        const tmpUsers = [];
    
        for (let i = 0; i < 1; i++) {
          const rand = Math.round(Math.random() * 255);
          const rand2 = Math.round(Math.random() * 255);
          const rand3 = Math.round(Math.random() * 255);
    
          tmpUsers.push(<HorizontalCircles key={i} colorFirst={"rgb(" + rand + "," + rand2 + "," + rand3 + ")"} colorSecond={"rgb(" + rand3 + "," + rand + "," + rand2 + ")"} />)
        }
        setTimeout(() => {
          setUsers(tmpUsers);
        }, 5000);
    
      }

Since my App.js included by navigations, I thought I need to add another file, where i can show my Provider.

Here is App.js

import 'react-native-gesture-handler';
import React from "react";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import MainScreen from './src/components/screens/MainScreen';
import NewScreen from './src/components/screens/NewScreen';
import AnotherScreen from "./src/components/screens/AnotherScreen";


const Stack = createStackNavigator();

const App = () => {

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home" screenOptions={{headerShown: false}}>
        <Stack.Screen name="Home" component={MainScreen} />
        <Stack.Screen name="NewScreen" component={NewScreen} />
        <Stack.Screen name="AnotherScreen" component={AnotherScreen} />        
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Here is App2.js where i include Provider,

import React, { createContext,  } from "react";
import { View } from "react-native";
import MainScreen from "./src/components/screens/MainScreen";


export const UserContext = createContext();

function App2() {

  const [users, setUsers] = useState([
    <HorizontalCircles skeleton={true} key={0} colorFirst={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} colorSecond={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} />,
    <HorizontalCircles skeleton={true} key={1} colorFirst={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} colorSecond={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} />,

  ])
  return (
    <View className="App2">
      <UserContext.Provider value={users, setUsers}>
        <MainScreen />
      </UserContext.Provider>

    </View>
  )
}

This is the only change in MainScreen.js after I added App2.js

  const [users, setUsers] = useContext(UserContext);

I left getUsers() function the same.

Whats my mistake? It doesnt work, I just want to learn how to use this, I thought this should have worked, but it doesnt.

it gives me an error, saying : invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects, must have Symbol.iterator method.

the last error i am getting is:

Answer 1

You are missing the array when assigning the value to context. Thats why you get the error message, you are expeting an array but it is not. So

<UserContext.Provider value={users, setUsers}>

Should be

<UserContext.Provider value={[users, setUsers]}>

But you should also useMemo to avoid unnecessary updates

const context = useMemo(() => ([users, setUsers]), [users])
// ... code

<UserContext.Provider value={context}>

Answer 2

For a component to have access to the context values it need to be wrapped with Provider.

Create a new file . UserContextManager

import React, {createContext} from 'react';

export const UserContext = createContext();

function UserContextManager(props) {
  const [users, setUsers] = useState([
    <HorizontalCircles
      skeleton={true}
      key={0}
      colorFirst={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
      colorSecond={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
    />,
    <HorizontalCircles
      skeleton={true}
      key={1}
      colorFirst={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
      colorSecond={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
    />,
  ]);

  return (
    <UserContext.Provider value={{users, setUsers}}>
      {props.children}
    </UserContext.Provider>
  );
}

export default UserContextManager;

In App.js

<UserContextManager>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" screenOptions={{headerShown: false}}>
  <Stack.Screen name="Home" component={MainScreen} />
  <Stack.Screen name="NewScreen" component={NewScreen} />
  <Stack.Screen name="AnotherScreen" component={AnotherScreen} />        
</Stack.Navigator>
</NavigationContainer>
</UserContextManager>

Now with the above change your MainScreen will have access to the context values.

In your MainScreen.js import the userContext

import { UserContext } from 'your path to UserContextManager';


const Mainscreen = () => {
const { users, setUsers } = useContext(UserContext); 
  
  .... 
}