CODEWITHSUNDEEP
reactjstypescriptnext.jsreact-context
Eliabe Santos
Eliabe Santos

Reputation: 19

Context Provider not working in Next with Typescript

The error is "Property 'Provider' does not exist on type 'ReactElement<SelectContext, string | JSXElementConstructor>'"

const RoomsCards = ({ rooms }: IRooms) => {
      interface SelectContext {
        selected: number
        setSelected: (e: any) => void
      }
      const SelectedContext = React.createElement<SelectContext>('selected')
      const [currentSelected, setCurrentSelected] = useState<number>()
      return (
        <SelectedContext.Provider value={{ currentSelected, setCurrentSelected }}>
          {React.Children.toArray(
            rooms.map((CurrentRoom: IRoomDetail) => MainCard(CurrentRoom))
          )}
        </SelectedContext.Provider>
      )
    }
    
    export default RoomsCards

i am using: "react": "^17.0.2", "next": "^12.1.5", "typescript": "4.5.2", "@types/react": "17.0.37",

Upvotes: 1

Views: 511

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 84912

const SelectedContext = React.createElement<SelectContext>('selected')

Creating a context is done using createContext, not createElement. Additionally, you need to do this outside of RoomsCards, so you're not creating a brand new context on every render. And finally, your default value "selected" doesn't match the type you specified, so you'll need to change that to satisfy typescript.

interface SelectContext {
  selected: number;
  setSelected: (e: any) => void;
}
const SelectedContext = React.createContext<SelectContext>({
  selected: 0
  setSelected: () => {}
});

const RoomsCards = ({ rooms }: IRooms) => {
  const [currentSelected, setCurrentSelected] = useState<number>();
  return (
    <SelectedContext.Provider value={{ currentSelected, setCurrentSelected }}>
      {React.Children.toArray(
        rooms.map((CurrentRoom: IRoomDetail) => MainCard(CurrentRoom))
      )}
    </SelectedContext.Provider>
  );
};

export default RoomsCards;

Upvotes: 2

Related Questions