React Provider - izudon/izudon.github.io GitHub Wiki

これの 6.4.4 節に詳しい。

./src/XxxProvider.js

import React, { createContext, useState, useContext } from "react";
import xxxData from "./xxx-data.json";

const XxxContext = createContext();
export const useXxx = () => useContext(XxxContext);

export default function XxxProvider ({ children }) {
    :
  return (
    <XxxContext.Provider value={{ xxxs, setXxxs }}>
      {children}
    </XxxContext.Provider >
  );
}

./src/index.js

  :
import XxxProvider from "./XxxProvider"; // ADD

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <XxxProvider>
      <App />
    </XxxProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
⚠️ **GitHub.com Fallback** ⚠️