I have a react.js application, that has multiple pages. I tried implementing the state context idea, but somehow I cannot get the value from useState in another component other than were I set the value. I tried two approaches, both of them don't work.
I have this StateContext.js file, which has all of the useStates I want all of my pages / Components to be able to read and write to:
import { createContext, useState } from "react";
export const ComponentPageFourContext = createContext();
export const ComponentPageThreeContext = createContext([]);
export const ComponentPageTwoContext = createContext([]);
export const ComponentPageOneContext = createContext([]);
export const ComponentTestContext = createContext([]);
const StateProvider = ({ children }) => {
//Test
const [test, setTest] = useState("");
//PageOne
const [file, setFile] = useState("", "");
const [constructionType, setConType] = useState("");
const [changeSegOnePiece, setChangeSegOnePiece] = useState("");
const [site, setSite] = useState("");
const [checkedElementChecked, setCheckedElementChecked] = useState();
const [checkedElementOf, setCheckedElementOf] = useState();
const [projectName, setProjectName] = useState("");
const [projectNo, setProjectNo] = useState("");
const [materialCode, setMaterialCode] = useState("");
const [sheetThickness, setSheetThickness] = useState("");
const [diamterODE, setDiameterODE] = useState("");
const [packingType, setPackingType] = useState("");
const [layoutNumber, setLayoutNumber] = useState("");
const [heatNo, setHeatNo] = useState("");
//PageTwo
const [correct, setCorrect] = useState();
const [typeGrooving, setTypeGrooving] = useState();
const [perforation, setPerforation] = useState();
const [norminal, setNorminal] = useState();
const [stripWidth, setStripWidth] = useState("");
const [stripThickness, setStripThickness] = useState("");
const [depthGrooving, setDepthGrooving] = useState("");
const [norminalValOf, setNorminalValOf] = useState("");
const [crimpHeightOne, setCrimpHeightOne] = useState("");
const [crimpHeightTen, setCrimpHeightTen] = useState("");
const [heightAcrossSeg, setHeightAcrossSeg] = useState(0);
const [crimpAngleOne, setCrimpAngleOne] = useState("");
const [angleAcrossSeg, setAngleAcrossSeg] = useState("");
const [mccFrom, setMccFrom] = useState("");
const [mccOf, setMccOf] = useState("");
const [resultFrom, setResultFrom] = useState(0);
const [resultOf, setResultOf] = useState(0);
const [result, setResult] = useState(0);
const [correctBiggerThan, setCorrectBiggerThan] = useState();
//page three
const [segPack, setSegPack] = useState();
const [halfDia, setHalfDia] = useState();
const [noLayers, setNoLayers] = useState();
const [spotCheck, setSpotCheck] = useState();
const [drawingNo, setDrawingNo] = useState("");
const [segNo, setSegNo] = useState();
const [segWidth, setSegWidth] = useState("");
const [lengthShortest, setLengthShortest] = useState("");
const [segHeight, setSegHeight] = useState("");
const [lengthLongest, setLengthLongest] = useState("");
const [diaLongitudinal, setDiaLongitudinal] = useState("");
const [endSeamGap, setEndSeamGap] = useState("");
const [diaCrosswiseOpt, setDiaCrosswiseOpt] = useState();
const [diaCrosswise, setDiaCrosswise] = useState("");
const [packFreeGaps, setPackFreeGaps] = useState();
const [diaFourtyFiveOpt, setDiaFourtyFiveOpt] = useState();
const [diaFourtyFive, setDiaFourtyFive] = useState("");
const [packCirc, setPackCirc] = useState("");
const [packCircOpt, setPackCircOpt] = useState();
//page four
const [packingCheckOne, setPackingCheckOne] = useState();
const [diaAcross, setDiaAcross] = useState();
const [elementHeight, setElementHeight] = useState("");
const [diaLongitudinalPageFour, setDiaLongitudinalPageFour] = useState("");
const [diaDiametralFourtyFive, setDiaDiametrialFourtyFive] = useState("");
const [diaCrosswisePageFour, setDiaCrosswisePageFour] = useState("");
const [packCircPageFour, setPackCircPageFour] = useState("");
const [date, setDate] = useState();
const [initials, setInitials] = useState("");
const [dateSecond, setDateSecond] = useState();
const [sulzerChemtech, setSulzerChemtech] = useState("");
const [noLayersPageFour, setNoLayersPageFour] = useState();
const [remarks, setRemarks] = useState("");
return (
<ComponentPageFourContext.Provider
value={{
packingCheckOne,
setPackingCheckOne,
diaAcross,
setDiaAcross,
elementHeight,
setElementHeight,
diaLongitudinalPageFour,
setDiaLongitudinalPageFour,
diaDiametralFourtyFive,
setDiaDiametrialFourtyFive,
diaCrosswisePageFour,
setDiaCrosswisePageFour,
packCircPageFour,
setPackCircPageFour,
date,
setDate,
initials,
setInitials,
dateSecond,
setDateSecond,
sulzerChemtech,
setSulzerChemtech,
noLayersPageFour,
setNoLayersPageFour,
remarks,
setRemarks,
}}
>
<ComponentPageThreeContext.Provider
value={{
segPack,
setSegPack,
halfDia,
setHalfDia,
noLayers,
setNoLayers,
spotCheck,
setSpotCheck,
drawingNo,
setDrawingNo,
segNo,
setSegNo,
segWidth,
setSegWidth,
lengthShortest,
setLengthShortest,
segHeight,
setSegHeight,
lengthLongest,
setLengthLongest,
diaLongitudinal,
setDiaLongitudinal,
endSeamGap,
setEndSeamGap,
diaCrosswiseOpt,
setDiaCrosswiseOpt,
diaCrosswise,
setDiaCrosswise,
packFreeGaps,
setPackFreeGaps,
diaFourtyFiveOpt,
setDiaFourtyFiveOpt,
diaFourtyFive,
setDiaFourtyFive,
packCirc,
setPackCirc,
packCircOpt,
setPackCircOpt,
}}
>
<ComponentPageTwoContext.Provider
value={{
correct,
setCorrect,
typeGrooving,
setTypeGrooving,
perforation,
setPerforation,
norminal,
setNorminal,
stripWidth,
setStripWidth,
stripThickness,
setStripThickness,
depthGrooving,
setDepthGrooving,
norminalValOf,
setNorminalValOf,
crimpHeightOne,
setCrimpHeightOne,
crimpHeightTen,
setCrimpHeightTen,
heightAcrossSeg,
setHeightAcrossSeg,
crimpAngleOne,
setCrimpAngleOne,
angleAcrossSeg,
setAngleAcrossSeg,
mccFrom,
setMccFrom,
mccOf,
setMccOf,
resultFrom,
setResultFrom,
resultOf,
setResultOf,
result,
setResult,
correctBiggerThan,
setCorrectBiggerThan,
}}
>
<ComponentPageOneContext.Provider
value={{
file,
setFile,
constructionType,
setConType,
changeSegOnePiece,
setChangeSegOnePiece,
site,
setSite,
checkedElementChecked,
setCheckedElementChecked,
checkedElementOf,
setCheckedElementOf,
projectName,
setProjectName,
projectNo,
setProjectNo,
materialCode,
setMaterialCode,
sheetThickness,
setSheetThickness,
diamterODE,
setDiameterODE,
packingType,
setPackingType,
layoutNumber,
setLayoutNumber,
heatNo,
setHeatNo
}}
>
<ComponentTestContext.Provider
value={[test, setTest]}>
{children}
</ComponentTestContext.Provider>
</ComponentPageOneContext.Provider>
</ComponentPageTwoContext.Provider>
</ComponentPageThreeContext.Provider>
</ComponentPageFourContext.Provider>
);
};
export default StateProvider;
The ComponentTestContext is the second way I tried to make it work, you will see where I tried to use them.
This is my App.js:
import { createContext, useState } from "react";
import "../css/App.css";
// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import BrowserTab from "./BrowserTab";
import NavbarHeader from "./Navbar.js";
import Footer from "./Footer.js";
import HomePage from "../pages/HomePage";
import Tutorial from "../pages/Tutorial";
import Help from "../pages/Help.js";
import PageOne from "../pages/PageOne";
import PageTwo from "../pages/PageTwo";
import PageThree from "../pages/PageThree";
import PageFour from "../pages/PageFour";
import StateProvider from "./StateContext.js";
function App() {
return (
<div>
<StateProvider>
<Router>
<NavbarHeader />
{/* <Footer /> */}
<Routes>
{/* <Route path="/app/page-four" element={<PageFour />} /> */}
<Route path="/app/page-three" element={<PageThree />} />
<Route path="/app/page-one" element={<PageOne />} />
<Route path="/app/page-two" element={<PageTwo />} />
<Route path="/" element={<HomePage />} />
<Route path="/tutorial" element={<Tutorial />} />
<Route path="/help" element={<Help />} />
</Routes>
</Router>
</StateProvider>
</div>
);
}
export default App;
I imported the useStates like this (PageOne.js):
const {
file,
setFile,
constructionType,
setConType,
changeSegOnePiece,
setChangeSegOnePiece,
site,
setSite,
checkedElementChecked,
setCheckedElementChecked,
checkedElementOf,
setCheckedElementOf,
projectName,
setProjectName,
projectNo,
setProjectNo,
materialCode,
setMaterialCode,
sheetThickness,
setSheetThickness,
diamterODE,
setDiameterODE,
packingType,
setPackingType,
layoutNumber,
setLayoutNumber,
heatNo,
setHeatNo
} = useContext(ComponentPageOneContext);
const [test, setTest] = useContext(ComponentTestContext)
As you can see, I tried to use [] as well as {} when importing but none of that works.
I do a setTest(value) in PageOne.js and when I print it there it has a value.
On the third page (PageThree.js) I tried to do
const {
file,
constructionType,
changeSegOnePiece,
site,
checkedElementChecked,
checkedElementOf,
} = useContext(ComponentPageOneContext);
const [test, setTest] = useContext(ComponentTestContext)
Both variants as you can see, but when I console.log none of them has a value...
Thanks for your help!
