CODEWITHSUNDEEP
javascriptreactjstypescripttypescript-typingsreact-hooks
Kevvv
Kevvv

Reputation: 4023

Typescript error when using React useContext and useReducer

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>

Upvotes: 4

Views: 8455

Answers (1)

NaNa
NaNa

Reputation: 76

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.

Upvotes: 2

Related Questions