Typescript error when using React useContext and useReducer

Question

I'm new to Typescript and I'm getting the following error on my variable state in using useContext and useReducer hooks:

Type '{ state: {}; dispatch: Dispatch; }' is not assignable to type '{ latlng: null; searchTerm: null; bookingId: null; myPin: null; selectedPin: null; selectedCard: null; selectedCardPin: null; }'.
Object literal may only specify known properties, and 'state' does not exist in type '{ latlng: null; searchTerm: null; bookingId: null; myPin: null; selectedPin: null; selectedCard: null; selectedCardPin: null; }'.ts(2322)

This is my app.tsx:

const App = () => {   
  const initialState = useContext(Context)   
  const [state, dispatch] = useReducer(reducer, initialState)    
  return(
    <Context.Provider value={{ state // <-this is where the error occurs//, dispatch }}>
         ...
    </Context.Provider>    
  )

Following is my context.jsx:

const Context = createContext({
    latlng: null,
    searchTerm: null,
    bookingId: null,
    myPin: null,
    selectedPin: null,
    selectedCard: null, 
    selectedCardPin: null,
})

Revision:

according to the advise, I've changed my `context.tsx' to the following, but still getting the error message:

Argument of type '{ latlng: null; searchTerm: null; bookingId: null; myPin: null; selectedPin: null; selectedCard: null; selectedCardPin: null; }' is not assignable to parameter of type 'MyContextType'.
Object literal may only specify known properties, and 'latlng' does not exist in type 'MyContextType'.ts(2345)

import { createContext } from 'react'

interface MyContextType {
    dispatch: React.Dispatch<any>,
    state: {
      latlng?: any,
      searchTerm?: any,
      bookingId?: any,
      myPin?: any,
      selectedPin?: any,
      selectedCard?: any, 
      selectedCardPin?: any,
    }
}

const Context = createContext<MyContextType>({
    latlng: null,
    searchTerm: null,
    bookingId: null,
    myPin: null,
    selectedPin: null,
    selectedCard: null, 
    selectedCardPin: null,
})

export default Context

2nd revision:

When I change my context.jsx to match the contents of createContext as following:

interface MyContextType {
    latlng?: any,
    searchTerm?: any,
    bookingId?: any,
    myPin?: any,
    selectedPin?: any,
    selectedCard?: any, 
    selectedCardPin?: any,
}

const Context = createContext<MyContextType>({
    latlng: null,
    searchTerm: null,
    bookingId: null,
    myPin: null,
    selectedPin: null,
    selectedCard: null,
    selectedCardPin: null,
})

the error is gone in context.jsx, but it causes a type error in app.jsx.

Type '{ state: {}; dispatch: Dispatch; }' is not assignable to type 'MyContextType'. Object literal may only specify known properties, and 'state' does not exist in type 'MyContextType'.ts(2322)

    <Context.Provider value={{ state //<-- here //, dispatch }}>
    </Context.Provider>

Declare a type with optional properties like interface MyContextType = { dispatch: Function, state: { latlng?: string, ... } } then use createContext<MyContextType>({ ... }) — p.s.w.g
– p.s.w.g, Commented Aug 7, 2019 at 17:07
@p.s.w.g I made the change as you mentioned, but am still getting the error — Kevvv
– Kevvv, Commented Aug 7, 2019 at 17:31
Sorry, for not being more explicit. You'll have to provide the dispatch and wrap state as well to match exactly what you expect to use in<Context.Provider value={}, e.g. createContext<MyContextType>({ dispatch: null, state: { latlng: null, ... }}). — p.s.w.g
– p.s.w.g, Commented Aug 7, 2019 at 17:35
@p.s.w.g It seems that if I match the interface to the states in context.jsx, it solves the type error within context.jsx, but it causes an error in app.jsx where state from value doesn't recognize MyContextType — Kevvv
– Kevvv, Commented Aug 7, 2019 at 18:00
Maybe you need interface MyContextType = { dispatch: Dispatch<any>, state: any }? That would sacrifice significant type safety, but it seems like your state object is very loosely defined anyway. — p.s.w.g
– p.s.w.g, Commented Aug 7, 2019 at 18:28

Sami Ahmed Siddiqui · Accepted Answer · 2019-10-04 07:20:27Z

2

Add 'as type' when you pass prop to Store.Provider, it can fix this error. Like this:

const [state, dispatch] = React.useReducer(reducer, initialState);
const value = { state, dispatch };
return <Store.Provider value={value as MyContextType}>{props.children}</Store.Provider>;

Let me know if this solves your issue.

edited Oct 4, 2019 at 7:20

Sami Ahmed Siddiqui

2,3861 gold badge18 silver badges30 bronze badges

answered Oct 4, 2019 at 6:14

NaNa

761 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript error when using React useContext and useReducer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related