Use Context to update data on every screen - reactjs

Question

This is my first time working with context. So, I've about 6 screens and on each screen, the user selects some options and on the 6th screen, I want all the information that they have selected/entered on previous screens.
I've created a class called context.js in which I've done this:
export const bookData = React.createContext({
bookingData: {
"app_date": 0,
"app_est": "",
"app_phone": "",
"app_ic": "",
"app_timeslots": {},
"app_hour": 0,
"app_est_url": "",
"app_year": 0,
"app_email": "",
}
})
This is the payload I'll need on the 6th screen. Now on-screen 1 I've imported it as import BookContext from '../utils/context' and this screen has a next button in which I want to pass data to app_email, app_phone, and app_ic which I've in variables that I populated using. useState() on this screen:
<MainActionButton title={'Next'} pressEvent={() => {
alert(email + phone + ic)
}} />
Here email, phone, and ic are set using a useState(). So how do I use BookContext that I've imported inside the pressEvent to access/update the context?
I might be completely off track here as I don't fully understand the concept of context yet so a brief answer will be appericiated.

Answer 1

For updating the value of the context you can follow this simple pattern:
Maintain a state in the component that has the provider. For example, you can have something like this:
const initialState = {
bookingData: {
"app_date": 0,
"app_est": "",
"app_phone": "",
"app_ic": "",
"app_timeslots": {},
"app_hour": 0,
"app_est_url": "",
"app_year": 0,
"app_email": "",
}
};
const [bookData, setBookData] = react.useState(initialState);
Pass the bookData and setBookData as context's value:
<BookData.Provider value={{state: bookData, updateState: setBookData}}></BookData.Provider>
Now in the child components you can use the passed object(value) for accessing and updating the state.
const { state, updateState } = React.useContext(BookData)

Answer 2

you would need to create an "api" inside your context to update records (e.g. bookContext.update(payload)), for example:
import * as React from "react";
let ContextOne = React.createContext();
let initialState = {
count: 10,
currentColor: "#bada55"
};
let reducer = (state, action) => {
switch (action.type) {
case "reset":
return initialState;
case "increment":
return { ...state, count: state.count + 1 };
case "decrement":
return { ...state, count: state.count - 1 };
case "set-color":
return { ...state, currentColor: action.payload };
}
};
function ContextOneProvider(props) {
let [state, dispatch] = React.useReducer(reducer, initialState);
let value = { state, dispatch };
return (
<ContextOne.Provider value={value}>{props.children}</ContextOne.Provider>
);
}
let ContextOneConsumer = ContextOne.Consumer;
export { ContextOne, ContextOneProvider, ContextOneConsumer };
i wrap my app in my custom context/provider:
import { ContextOneProvider } from "./ContextOne";
import { App } from "./App";
ReactDOM.render(
<ContextOneProvider>
<App />
</ContextOneProvider>,
document.getElementById("root")
);
now when I consume ContextOne:
function App() {
let { state, dispatch } = React.useContext(ContextOne);
// dispatch will update the context and re-render
}
I wrote a walkthrough about that in:
https://dev.to/oieduardorabelo/react-hooks-how-to-create-and-update-contextprovider-1f68
One library that I recommend to abstract React.Context is:
https://github.com/jamiebuilds/unstated-next