How do you set "null" to a setstate function in typescript?-CodePudding

I am creating react context that requires an initial value like these

export const HotelSearchContext = createContext<HotelSearch>({
  checkInDate: null,
  checkOutDate: null,
  setCheckInDate: null,
  setCheckOutDate: null,
});

Type HotelSearch

export interface HotelSearch {
  checkInDate: Date | null;
  checkOutDate: Date | null;
  setCheckInDate: React.Dispatch<React.SetStateAction<Date | null>>;
  setCheckOutDate: React.Dispatch<React.SetStateAction<Date | null>>;
}

I want to use the setter function of a state in a child component that is way down in the component tree.

        <HotelSearchContext.Provider
          value={{
            checkInDate,
            checkOutDate,
            setCheckInDate,
            setCheckOutDate,
          }}
        >
          {menuWide ? renderTab() : renderResults()}
        </HotelSearchContext.Provider>

Question When writing the default value for the createContext function I have to write a "default" value for the function. Remember context is created Outside the parent component so I can't access the actual set state function.

My first option was writing null for the function key but I got an error Type 'null' is not assignable to type 'Dispatch<SetStateAction<Date | null>>'.

For other properties, I can safely write null and be done with it. For functions it's tricky. Please help.

CodePudding user response：

You can assign an empty function:

export const HotelSearchContext = createContext<HotelSearch>({
  checkInDate: null,
  checkOutDate: null,
  setCheckInDate: ()=>{},
  setCheckOutDate: ()=>{},
});

but if you don't feel like giving it a default value you can just do

export const HotelSearchContext = createContext<HotelSearch>(null as any);

CodePudding user response：

You can set Initial Context is Null, and then override type for useHotelSearch, like this:

import React, { createContext, useContext, useState } from "react";

export interface HotelSearch {
  checkInDate: Date | null;
  checkOutDate: Date | null;
  setCheckInDate: React.Dispatch<React.SetStateAction<Date | null>>;
  setCheckOutDate: React.Dispatch<React.SetStateAction<Date | null>>;
}

export const HotelSearchContext = createContext<HotelSearch | null>(null);

export const HotelSearchProvider = ({ children }) => {
  const [checkInDate, setCheckInDate] = useState(null);
  const [checkOutDate, setCheckOutDate] = useState(null);
  return (
    <HotelSearchContext.Provider
      value={{ checkInDate, setCheckOutDate, setCheckInDate, checkOutDate }}
    >
      {children}
    </HotelSearchContext.Provider>
  );
};

export const useHotelSearch = () => {
  return useContext(HotelSearchContext) as HotelSearch;
};

Or setCheckOutDate and setCheckOutDate are empty function, and you dont need to override type for useHotelSearch:

export const HotelSearchContext = createContext<HotelSearch | null>({
  checkInDate: null,
  checkOutDate: null,
  setCheckInDate: () => {},
  setCheckOutDate: () => {}
});

export const useHotelSearch = () => {
  return useContext(HotelSearchContext);
};