How to satisfy typescript when using the context API?

Question

I am currently writing my context API like so:

import React, { useState, createContext, SetStateAction } from 'react'

type LoginContextProps = [boolean, React.Dispatch<SetStateAction<boolean>>]

export const LoginContext = createContext<LoginContextProps>([])

export const LoginProvider = ({
  children,
}: React.PropsWithChildren<unknown>) => {
  const [isLogin, setIsLogin] = useState(false)
  return (
    <LoginContext.Provider value={[isLogin, setIsLogin]}>
      {children}
    </LoginContext.Provider>
  )
}

I am however unsure how to satisfy typescript on the createContext portion of the code, what two objects can I pass through to make typescript type aware and not complain?

`setIsLogin` is actually of type `(value: boolean) => void`, so you can use it instead of less clean and concise `React.Dispatch>` — Nikita Ivanov, Apr 27 '21 at 10:43
https://stackoverflow.com/questions/61333188/react-typescript-avoid-context-default-value/66331283#66331283 — marinvirdol, Apr 27 '21 at 12:55

score 1 · Accepted Answer · answered Apr 27 '21 at 10:41

1

You need to provide a valid default context, and it should satisfy the type LoginContextProps. For example, it may be [false, () => {}]. [] that you used is not a valid value since it's empty, but every component that happens to be outside of any LoginContext.Provider will expect that LoginContext will provide them a boolean and a boolean setter.

answered Apr 27 '21 at 10:41

Nikita Ivanov

767
5
17

Thank you very much works perfectly, I tried giving it the type boolean etc but it wasn't working glad the fix is so easy! – lukeet Apr 27 '21 at 11:29

score 0 · Answer 2 · answered Apr 27 '21 at 10:51

0

You can simply make them optional:

type LoginContextProps = {
  isLogin?: boolean, 
  setIsLogin?: React.Dispatch<SetStateAction<boolean>>
}

answered Apr 27 '21 at 10:51

Bart Krakowski

1,655
2
8
25

score -1 · Answer 3 · answered Apr 27 '21 at 10:43

import React, { useState, createContext, SetStateAction } from 'react'

type LoginContextProps = [boolean, React.Dispatch<SetStateAction<boolean>>]
type LoginProviderProps = {
   children: React.ReactNode
}
export const LoginContext = createContext<LoginContextProps>([])

export const LoginProvider = ({
  children,
}: LoginProviderProps) => {
  const [isLogin, setIsLogin] = useState<boolean>(false)

  const  values: LoginContextProps = [isLogin, setIsLogin]

  return (
    <LoginContext.Provider value={values}>
      {children}
    </LoginContext.Provider>
  )
}

How to satisfy typescript when using the context API?

3 Answers3