组合 useContext 提供者

Question

as im creating a reactjs project, i have devided my context into three separate files, therefore i ended up with three context providers, at first i wrapped all the context providers one by one around my components in app.js, but i figures maybe if i combined all the context providers in one component and use this component to wrap my app.js so i created the file with below code

import React from "react";
import CryptoContextProvider from "./crypto-context";
import NewsContextProvider from "./news-context";
import DataContextProvider from "./index-context";

const allContextProviders = (props) => {
  return (
    <>
      <CryptoContextProvider>
        <NewsContextProvider>
          <DataContextProvider>{props.children}</DataContextProvider>
        </NewsContextProvider>
      </CryptoContextProvider>
    </>
  );
};

export default allContextProviders;

then i wrrap my app.js as follows

import allContextProviders from "./store/allContextProviders";

function App() {
  return (
    <allContextProviders>
      <div className="App">
        <Navbar />
        <Routes>
          <Route path="/" element={<Navigate to="/welcome" />} />
          <Route path="/welcome" element={<Home />} />
          <Route path="/marketplace" element={<Marketplace />} />
          <Route path="/tools" element={<ToolsServices />} />

yet when i trie to wrap my app.js with the allContextProviders component i get this following error

Line 12:8:  'allContextProviders' is defined but never used  no-unused-vars

am i doing something wrong here? your feedback is appreciated

Answer 1

In React to tell it that the variable name is Component ( and please evaluate it ), the name of the component should start with a capital letter like AllContextProvider. Please change it's name so that React knows and it will evaluate it in run time.