CODEWITHSUNDEEP
reactjstypescriptreact-context
Álvaro
Álvaro

Reputation: 2588

Custom context hook TypeScript

I am trying to use a custom hook with the context API based on this interesting approach todos-many-ways

I am getting an error when using it with a simple state for a number, ideally I would have a more meaningful setter function but I am getting errors just setting it up.

import * as React from 'react'

const mainState = () => {
  const [edit, setEdit] = React.useState<number | null>(null)

  return {
    edit,
    clear: () => setEdit(null)
  }
}

const MainContext = () => React.createContext<ReturnType<typeof mainState> | null>(null)

// I get an error on `MainContext`: `...is not assignable to parameter of type 'Context<unknown>`
export const useMainContext = () => React.useContext(MainContext)

export function MainProvider({children}: {children: React.ReactNode}){
  return (
    <MainContext.Provider value={mainState()}>
      {children}
    </MainContext.Provider>
  )
}

Upvotes: 1

Views: 124

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

Try passing the value instead of declaring a function:

const MainContext = React.createContext<ReturnType<typeof mainState> | null>(null)

Upvotes: 1

Related Questions