Error - JSX Element type 'X'does not have any constructor or call signatures

Question

I am trying to render a data by context provider however i got this message reading JSX Element type Context does not have any constructor or call signatures.

My Code in App.tsx is

import { Context } from './interfaces/cardContext';

const App = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Context>
          <RestaurantDetails />
        </Context>
        <Footer />
      </BrowserRouter>
    </div>
  );
};
export default App 

and in my Context page

export interface ContextData {
  restaurants: restaurantType[];
}
export interface Props {
  children: React.ReactNode;
}
export const Context = createContext({} as ContextData);

export const Provider = ({ children }: Props) => {
  const [restaurants, setRestaurants] = useState<restaurantType[]>([]);

  useEffect(() => {
    fetch('http://localhost:5001/restaurants')
      .then((res) => res.json())
      .then((data) => setRestaurants(data));
  }, []);
  return (
    <Context.Provider value={{ restaurants }}>{children}</Context.Provider>
  );
};

Answer 1

You should import your provider as a wrapper of other components:

import { Provider } from './interfaces/cardContext';

const App = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Provider>
          <RestaurantDetails />
        </Provider>
        <Footer />
      </BrowserRouter>
    </div>
  );
};
export default App 

And then use your context like this in other componens:

import {useContext} from 'react';
import { Context } from 'path-to-card-context';

const {restaurants} = useContext(Context);