'Rendering <Context> directly is not supported and will be removed in a future major release error

i am getting the following errror:

Warning: Rendering directly is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?

This is my app.js component:

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import SignInSide from "./components/SignInSide";
import AboutUs from "./pages/AboutUs";
import ourservices from "./pages/OurServices";
import portfolio from "./pages/portfolio";
import SignUp from "./components/signup";
import booking from "./pages/book";
import PreviousBookings from "./pages/PreviousBookings";
import BookingContext from "./context/bookings/BookingContext";
function App() {
return (
<>
  <BookingContext>
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/aboutus" component={AboutUs} />
        <Route path="/ourservices" component={ourservices} />
        <Route path="/developer" component={portfolio} />
        <Route path="/login" component={SignInSide} />
        <Route path="/signup" component={SignUp} />
        <Route path="/booking" component={booking} />
        <Route path="/booking-history" component={PreviousBookings} />
      </Switch>
    </Router>
  </BookingContext>
</>
 );
 }

export default App;

I am trying to use the useContext hook.



Solution 1:[1]

I had this error not too long ago. The issue was with my imports...so I was importing the context itself and rendering that, rather than the context provider function itself

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mbugua_J