React Context API - create context from axios response - reactjs

Question

How to create context from axios response?
import React, { createContext } from 'react';
import axios from 'axios';
const AppContext = createContext({
lang: 'en',
currency: 'USD',
name: 'Demo store'
});
const token = JSON.parse(localStorage.getItem('token'));
axios.get('http://localhost:3000/storedata', {
headers: {
'Authorization' : `Bearer ${token}`
}
})
.then(response => {
//set context
})
.catch(error => {
});
export default AppContext;
Header.js
import React, { useContext } from 'react';
import AppContext from '../../context/AppContext';
const Header = props => {
const appContext = useContext(AppContext);
console.log(appContext);
}
This is my code. I was storing lang, currency and name in local storage when login and getting values from local storage wherever need.
Now I want to store in global state when login and pass value to other components. I am not able to create context from API call.

Answer 1

In my react apps I fetch data to context like that
// context.js
export const MyContextData = createContext(null); // null is the default value
export const MyContext = (props) => {
const [myState, SetMyState] = useState(null);
useEffect(() => {
axios
.get("http://localhost:3000/storedata", {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((response) => {
setMyState(response); // update your state
})
.catch((error) => {
// handle errors
});
}, []);
return (
<MyContextData.Provider
value={myState} // value of your context
>
{props.children}
</MyContextData.Provider>
);
};
// index.js
//wrap your app with the context so the whole app re-render when the context update
<MyContext>
<App />
</MyContext>;
// app.js
const App = () => {
const context = useContext(MyContextData);
// if the context is null then the data have not been fetched yet
if (!context) {
return; // maybe a loading indicator
} else {
return; //data have been fetched and you can use it
}
};

Answer 2

You need to create a context provider and store the settings in a state:
Context
const AppContext = createContext();
const ContextProvider = () => {
const [settings, setSettings] = useState({
lang: 'en',
currency: 'USD',
name: 'Demo store'
});
// In your axios call, use setSettings to update the settings
return <Context.Provider value={{settings}}/>
};