Type 'unknown[]' is missing the following properties from type 'InitialState'

Question

Trying to work out how to pass types to value?

<Context.Provider value={[state, dispatch]}>{children} 
</Context.Provider>

Type 'unknown[]' is missing the following properties from type 'InitialState': navigateTo, user, avatar, dashBoardSelectedMenuItemts(2739) index.d.ts(338, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps' (JSX attribute) React.ProviderProps.value: InitialState

import React, { createContext } from "react";
import Reducer from "./reducer";

interface InitialState {
  navigateTo: string;
  user: string;
  avatar: string;
  dashBoardSelectedMenuItem: string;
}

const initialState: InitialState = {
  navigateTo: "dashboard",
  user: null,
  avatar: null,
  dashBoardSelectedMenuItem: "dashboard",
};
export const Context = createContext<InitialState>(initialState);

const Store = ({ children }) => {
  const [state, dispatch] = React.useReducer<any>(Reducer, initialState);

  return (
    <Context.Provider value={[state, dispatch]}>{children}</Context.Provider>
  );
};

export default Store;

Thanks for looking.

shankar upadhyay · Answer 1 · 2021-11-14T15:30:39.857

1

Let me try to help you.

Here as you have defined the type os user and avatar in Initial state as string you should pass string only as value.

Perhaps you are passing null instead of an empty string "" could solve the type problem.

typeof null is Object.

const initialState: InitialState = { navigateTo: "dashboard", user: "", avatar: "", dashBoardSelectedMenuItem: "dashboard", };

You may visit this link for similar problem Using react context with react hooks in typescript

edited Nov 14 '21 at 15:30

answered Nov 14 '21 at 15:16

shankar upadhyay

883
12
18

1

Hi, after changing the values to empty strings, value is still complaining type unknown[] is missing the ... , same as before , thanks for trying. – fuzzybear Nov 14 '21 at 15:21
Hi, same after trying value={[{{initialState:state}, dispatch]}> – fuzzybear Nov 14 '21 at 15:33
1

createContext<[InitialState, React.Dispatch]> can you try after removing the array if it doesn't have a purpose createContext> – shankar upadhyay Nov 14 '21 at 15:38
1

that works in combo with @Amila Senadheera answer above – fuzzybear Nov 14 '21 at 15:42

Amila Senadheera · Accepted Answer · 2021-11-14T15:39:36.963

Try this

import React, { createContext } from "react";
import Reducer from "./reducer";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

interface InitialState {
  navigateTo: string;
  user: string | null;
  avatar: string | null;
  dashBoardSelectedMenuItem: string;
}

const initialState: InitialState = {
  navigateTo: "dashboard",
  user: null,
  avatar: null,
  dashBoardSelectedMenuItem: "dashboard"
};

export const Context = createContext<[InitialState, React.Dispatch<any>]>([
  initialState,
  () => {}
]);

const Store = ({ children }) => {
  const [state, dispatch] = React.useReducer(Reducer, initialState);

  return (
    <Context.Provider value={[state, dispatch]}>{children}</Context.Provider>
  );
};

export default Store;

In your reducer add the type information for the state like below

export const Reducer = (state: InitialState, action:any): InitialState => {
  switch (action.type) {
    ...
    ...
  }
}

you're close error has now moved to'state' instead of value... Type '{}' is missing the following properties from type 'InitialState': navigateTo, user, avatar, dashBoardSelectedMenuItem — fuzzybear, Nov 14 '21 at 15:35
works with comment from @shankar bellow removed any from usereducer — fuzzybear, Nov 14 '21 at 15:43
accepting your answer as was closest did not need the reducer code, pls credit @shankar upadhyay below. — fuzzybear, Nov 14 '21 at 16:04

Type 'unknown[]' is missing the following properties from type 'InitialState'

2 Answers2