using (createContext) is not rendering other components. Please check my code. If I am not using Context other components are working fine but while using Context, not a single component is showing up. Here are details about my code. I have tried removing context and it works fine without it but I will need it context in some components , I cannot remove context .

App.js Components- -

import "./App.css";

import Nav from "./Nav";

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";


import Students from "./Students";
import Mentors from "./Mentors";
import Home from "./Home";
import Student from "./Student";
import Mentor from "./Mentor";

//import { StudentsProvider } from "./StudentsContext";

import { MentorsProvider } from "./MentorsContext";

function App() {
  return (
    <div className="App">
      <Router>
        {/* <StudentsProvider>  */}
        <MentorsProvider>
          <Nav />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/students" component={Students} />

            <Route path="/students/:id" component={Student} />

            <Route exact path="/mentors" component={Mentors} />
            <Route path="/mentors/:id" component={Mentor} />
          </Switch>
          {/* </StudentsProvider> */}
        </MentorsProvider>
      </Router>
    </div>
  );
}

export default App;

This is MentorsContext.js -- 
import { useState,     createContext,     useEffect } from "react";

export const MentorsContext = createContext();

export const MentorsProvider = (props) => {
  const [mentors, setMentors] = useState([]);

  useEffect(() => {
    const getMentors = async () => {
      try {
        const res = await fetch("http://localhost:3001/mentors");
        const data = await res.json();
        //console.log(data);
        setMentors(data);
      } catch (err) {
        console.log(err);
      }
      getMentors();
    };
  }, []);

  return (
    <MentorsContext.Provider value={[mentors, setMentors]}>
      {props.childern}
    </MentorsContext.Provider>
  );
};

CodePudding user response：

it should be children not childern

<MentorsContext.Provider value={[mentors, setMentors]}>
      {props.children}
</MentorsContext.Provider>