Set dynamic values for properties in a a constant object react - reactjs

Question

I have Const like this in my config.service.ts file
export const mysettings={
userid:"12324",
conf:{
sessionDuration:30,
mac:"LON124"
}
}
I am using this constant in some components
But instead of hardcoding those values in const I need to get that at runtime from JSON file in my public folder
So I have a function like this as well
async getConfig(){
const data=await fetch("./data/data.json")
.then((response) => response.json())
.then((json) => return json );
}
So in my data.json files I have those values for the const and I need these values in that JSON file to updated or the JSON file itself sometimes replaced.
Please help me how to accomplish that?

Answer 1

You can create a Context and ContextProvider to load your data from json file, set it to state variable and just pass it to Context consumers:
DataContext.tsx:
import { createContext, useState, useContext, useEffect, PropsWithChildren } from "react";
import asyncData from "./asyncData";
interface IData {
userid: string;
conf: {
sessionDuration: number;
mac: string;
};
}
interface IContextValue {
data: IData;
}
const StateContext = createContext<IContextValue>(null!);
export function DataContextProvider(props: PropsWithChildren) {
const [data, setData] = useState<IData>(undefined!);
useEffect(() => {
asyncData.then((json) => setData(json)).catch(console.error);
}, []);
// Optionally - wrap with useMemo
const contextValue: IContextValue = {
data: data
};
return (
<StateContext.Provider value={contextValue}>
{data && props.children}
</StateContext.Provider>
);
}
export default function useDataContext() {
const context = useContext(StateContext);
if (!context) {
throw new Error(
"useDataContext must be used within the DataContextProvider"
);
}
return context;
}
Updates to index.tsx:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { DataContextProvider } from "./DataContext";
import App from "./App";
import asyncData from "./asyncData";
asyncData.then((config) => {
console.log("Config is fetched before render: ", config);
const rootElement = document.getElementById("root");
const root = createRoot(rootElement!);
root.render(
<StrictMode>
<DataContextProvider>
<App />
</DataContextProvider>
</StrictMode>
);
});
Usage:
import useDataContext from "./DataContext";
export default function App() {
const { data } = useDataContext();
return <div className="App">{JSON.stringify(data)}</div>;
}
asyncData.ts:
const asyncData = fetch("./data/data.json").then((response) => response.json());
export default asyncData;