TS2604: JSX element type 'SomeContext' does not have any construct or call signatures-CodePudding

I have seen some questions but none really address this problem when it comes to creating a react context.

creating the context

export const BookingContext = createContext<BookingContextType>({
  initiateBooking() {},
});

JSX

  const initiateBooking = (flight: Departures) => {
    setBooking(true);
  };

        <BookingContext value={{ initiateBooking }}>
          <div className="rounded-lg mt-1 overflow-y-auto h-96 found-flights ">
            {foundFlights?.map((foundFlight) => (
              <FoundFlight foundFlight={foundFlight} sortBy={sortBy} />
            ))}
          </div>
        </BookingContext>

Type

export interface BookingContextType {
  initiateBooking: (flight: Departures) => void;
}

I however get the error TS2604: JSX element type 'BookingContext' does not have any construct or call signatures.

I honestly don`t know wtf that is and I need some help.

CodePudding user response：

Instead of using BookingContext, use BookingContext.Provider in the JSX.

<BookingContext.Provider value={{ initiateBooking }}>
  /* ... */
</BookingContext.Provider>