I have two functions, one is GetUsers()
, other one is GetDiscussion()
in GlobalContextManager.js
In MainScreen.js
I can get returning value from GetUsers()
, but i cant get value from GetDiscussion()
Here is GlobalContextManager.js
import React, { createContext, useContext, useState } from 'react';
import HorizontalCircles from "../components/HorizontalDiscussion";
import HorizontalDiscussion from "../components/HorizontalDiscussion";
export const GlobalContext = createContext();
function GlobalContextManager(props) {
const GetUsers = () => {
const returnFromService = {
"errorCode": -1,
"data": {
"colors": [
{
colorFirst:"red",
colorSecond:"black",
},
{
colorFirst:"pink",
colorSecond:"gray",
}
]
}
};
if (returnFromService.errorCode === -1) {
const returnFromGlobal = returnFromService.data.colors;
return returnFromGlobal;
} else {
return returnFromService.errorCode;
}
}
const GetDiscussion = () => {
const returnFromService = {
"errorCode": -1,
"data": {
"cards": [
{
"isLive": true,
"type": "Topic",
"title": "Human Resources Analysis",
"author": "Emran Emon",
"attendees": 12,
"color": "#FFF9F2",
"circles": [
"white",
"yellow",
"red",
"gray"
],
"attendeesColor": "pink"
},
{
"isLive": false,
"type": "Topic",
"title": "React Native Course UI",
"author": "Matias Delgado",
"attendees": 12,
"color": "#E7FBFF",
"circles": [
"white",
"yellow",
"red",
"gray"
],
"attendeesColor": "pink"
}
]
}
}
}
if (returnFromService.errorCode === -1) {
const returnFromGlobal = returnFromService.data.cards;
return returnFromGlobal;
} else {
return returnFromService.errorCode;
}
return (
<GlobalContext.Provider value={{ GetUsers, GetDiscussion }}>
{props.children}
</GlobalContext.Provider>
);
}
export default GlobalContextManager;
Here is related part in MainScreen.js
import { GlobalContext } from '../../context/GlobalContextManager';
const MainScreen = ({ navigation }) => {
const global = useContext(GlobalContext);
const getUsers = () => {
console.log("users from global:",global.GetUsers());
const g_users = global.GetUsers();
const tmpUsers = g_users.map((a,index) => <HorizontalCircles key={index} colorFirst={a.colorFirst} colorSecond={a.colorSecond} />)
setTimeout(() => {
setUsers(tmpUsers);
}, 5000);
}
const getDiscussion = () => {
console.log("Getting Discussion Card")
const g_discussion = global.GetDiscussion();
const tmpHorizontal = g_discussion.map((a, index) => <HorizontalDiscussion key={index} color={a.color} /> )
setTimeout(() => {
setHorizontalDiscussion(tmpHorizontal);
}, 3000);
}
The first function works, but the other doesnt. It says "can't find variable:returnFromService" for the second one. I thought it would work if i changed this variable name because i used it in first function, but it still didnt work.
try to replace your code with following Actually you were using variable after enclosing function's braces
import React, { createContext, useContext, useState } from 'react';
import HorizontalCircles from "../components/HorizontalDiscussion";
import HorizontalDiscussion from "../components/HorizontalDiscussion";
export const GlobalContext = createContext();
function GlobalContextManager(props) {
const GetUsers = () => {
const returnFromService = {
"errorCode": -1,
"data": {
"colors": [
{
colorFirst:"red",
colorSecond:"black",
},
{
colorFirst:"pink",
colorSecond:"gray",
}
]
}
};
if (returnFromService.errorCode === -1) {
const returnFromGlobal = returnFromService.data.colors;
return returnFromGlobal;
} else {
return returnFromService.errorCode;
}
}
const GetDiscussion = () => {
const returnFromService = {
"errorCode": -1,
"data": {
"cards": [
{
"isLive": true,
"type": "Topic",
"title": "Human Resources Analysis",
"author": "Emran Emon",
"attendees": 12,
"color": "#FFF9F2",
"circles": [
"white",
"yellow",
"red",
"gray"
],
"attendeesColor": "pink"
},
{
"isLive": false,
"type": "Topic",
"title": "React Native Course UI",
"author": "Matias Delgado",
"attendees": 12,
"color": "#E7FBFF",
"circles": [
"white",
"yellow",
"red",
"gray"
],
"attendeesColor": "pink"
}
]
}
}
// } remove it from here
if (returnFromService.errorCode === -1) {
const returnFromGlobal = returnFromService.data.colors;
return returnFromGlobal;
} else {
return returnFromService.errorCode;
}
} // put it here
return (
<GlobalContext.Provider value={{ GetUsers, GetDiscussion }}>
{props.children}
</GlobalContext.Provider>
);
}
export default GlobalContextManager;
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments