I want to load a JSON settings file dynamically in my react application.
I'm using webpack and when I import the file like:
import appSettings from './appSettings.json';
Or require it:
const appSettings = require('./appSettings.json');
It compiles the json and not load it dynamically (e.g. not changeable during runtime).
Can someone assist ?
You should consider adding useEffect hook so that it re-renders your page when there is a change in the json
import appSettings from './appSettings.json';
import {useEffect} from 'react';
useEffect(()=>{
//code to run whe the json has loaded
},[appSettings])
At last, what I did is loading the file with axios in the root of my app.
const [appSettings, setAppSettings] = React.useState<any>(null);
React.useEffect(() => {
axios.get('./appSettings.json').then((response: any) => {
setAppSettings(response.data);
});
}, [appSettings && appSettings.data]);
return (
appSettings &&
appSettings.baseUrl && (
<Layout className={styles.root}>
<MyApp appSettings={appSettings} />
</Layout>
)