Question: 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.

Answer: 
Solution for me was changing:

```
import AuthProvider from "./context/AuthContext";

```

To:

```
import {AuthProvider} from "./context/AuthContext";

```

I'm new with React, might be because AuthProvider is not the default export
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