React Context-Driven AppState Scaffolding Snippets

react-context-appstate.md

React Context-Driven AppState Scaffolding

• /context/

  • AppState.js
  • app-context.js

• Wrap App _(app.js)

  import AppState from "../context/AppState";
  <AppState>
    ...
  <AppState>

• User in components with context hook

  import React, { useState, useEffect, useContext } from 'react'
  import AppContext from "../../context/app-context";
  const { randomAgent, setRandomAgent } = useContext(AppContext);

---

AppState.js

import React, { useState } from "react";
import AppContext from "./app-context";

const AppState = (props) => {
//   const [isAuth, setIsAuth] = useState(true);
  const [randomAgent, setRandomAgent] = useState(null)

  return (
    <AppContext.Provider
      value={{
        setRandomAgent,
        randomAgent
      }}
    >
      {props.children}
    </AppContext.Provider>
  );
};

export default AppState;

app-context.js

import { createContext } from "react";

const appContext = createContext();

export default appContext;