To create a folder for creating the context. The folder structure is added below
The code is added below
"use client";
import { createContext, useContext, useState, useRef, useEffect } from 'react';
const DataContext = createContext({
index: '',
setData: () => [],
})
export const useDataContext = () => useContext(DataContext)
export const DataContextProvider = ({ children }) => {
const [Data, setData] = useState('');
return (
<DataContext.Provider value={{ Data, setData }} >
{children}
</DataContext.Provider>
);
}
To need to add the Context in the layout file to pass all the child
<body className={inter.className}>
<DataContextProvider>
{children}
</DataContextProvider>
</body>
Then we can set and get the value in the pages.
import { useDataContext } from './../hooks/index'
const { Data, setData } = useDataContext();
setData(workOrdersData);
To get the value using the Data variable
if(Data){
const workOrderLists = Data.map(obj => (obj.comments || []).map(item => item || []).flat())
.filter(item => item.length > 0);
const workOrder = Data.map(obj => (obj.workOrderList || []).map(item => item || []).flat())
.filter(item => item.length > 0);
setComments(workOrderLists?.[0]);
setWorkorder(workOrder?.[0]);
const foundOrder = workOrder?.[0].find((workOrder) => workOrder.id === parseInt(url.searchParams.get("id")));
setfoundOrder(foundOrder)
}