react Context Provider example

reactContext.js

import { createContext, useContext, useMemo, useState } from "react";

// create content variable for store data
export const ForumContext = createContext();

// check Provider root level top
export function useForum(){
  const context = useContext(ForumContext);
  if (!context) {
    throw new Error(`useForum must be used within a UserContext`)
  }
  return context;
}

// create branch off forum
export function useBoard(){
  const context = useContext(ForumContext);
  if (!context) {
    throw new Error(`useForum must be used within a UserContext`)
  }
  const {boardID, setBoardID} = context;
  return {boardID, setBoardID};
}

// this context props top root level that pass to child component
export function ForumProvider(props){
  const [forumID, setForumID] = useState('');
  const [boardID, setBoardID] = useState('');
  const [postID, setPostID] = useState('');
  const [commentID, setCommentID] = useState('');

  const value = useMemo(()=> ({
    forumID,setForumID,
    boardID,setBoardID,
    postID,setPostID,
    commentID,setCommentID,
  }),[forumID,boardID,postID,commentID]);

  return <ForumContext.Provider value={value} {...props} />
}

//... child
// import {useForum} from "../forumprovider"

function ForumSection(){

  const {forumID, setForumID} = useForum();
  const {boardID, setBoardID} = useBoard();

  return (<>
    <label> Forum </label>
  </>)
}

//... app root area

return (<>
  <ForumProvider>
    <ForumSection />
  </ForumProvider>
</>)