Having trouble resolving TypeScript TS2322 error with Context API + useState hook in your React App?

Question

Having trouble resolving TypeScript TS2322 error with Context API + useState hook in your React App?

Currently, I am working on a React Typescript project that utilizes the Context API to pass down a useState hook.

export const AppContext = React.createContext(null);

function App() {
  const [value, setValue] = React.useState(3);

  return (
    <AppContext.Provider
      value={{
        value,
        setValue
      }}
    >
      <div>
        <h1>App</h1>
        <Child />
      </div>
    </AppContext.Provider>
  );
}

The project is functioning correctly on Code Sandbox: https://codesandbox.io/s/interesting-lamarr-fyy1b

However, upon attempting to replicate the setup in a project created with Create React App (

npx create-react-app project-name --typescript

), I encountered an error:

Type '{ value: number; setValue: Dispatch>; }' is not assignable to type 'null'. TS2322

I suspect that this issue arises because null is initially set as the value for AppContext, but it gets overridden by the value passed to the Provider.

If my assumption is correct, what would be the best way to address this problem? Could relaxing the TypeScript settings be a solution, or is there a more elegant workaround that avoids this conflict altogether? As someone new to both TypeScript and the Context API, I'm unsure if my approach is less than ideal in either aspect.

typescript create-react-app

Answer 1

Answer №1

This particular issue does not stem from Typescript, but rather a simple adjustment in the code is required:

export const AppContext = React.createContext(null);

Should be changed to:

export const AppContext = React.createContext({});

Additionally, I suggest refactoring your Child component using AppContext.Consumer as follows:

const Child = () => {
  return (
      <AppContext.Consumer>
        {({ value, setValue }) => (
          <div>
            <h2>{value}</h2>
            <button onClick={() => setValue(value + 1)}>Click</button>
          </div>
        )}
      </AppContext.Consumer>
  );
};

Answer 2

This particular issue does not stem from Typescript, but rather a simple adjustment in the code is required:

export const AppContext = React.createContext(null);

Should be changed to:

export const AppContext = React.createContext({});

Additionally, I suggest refactoring your Child component using AppContext.Consumer as follows:

const Child = () => {
  return (
      <AppContext.Consumer>
        {({ value, setValue }) => (
          <div>
            <h2>{value}</h2>
            <button onClick={() => setValue(value + 1)}>Click</button>
          </div>
        )}
      </AppContext.Consumer>
  );
};

Answer 3

Answer №2

Did you attempt to declare the State using

React.useState<number|null>

?

Answer 4

Did you attempt to declare the State using

React.useState<number|null>

?

Having trouble resolving TypeScript TS2322 error with Context API + useState hook in your React App?

Answer №1

Answer №2

Similar questions

The combination of TypeScript decorators and Reflect metadata is a powerful tool for

Utilize mapGetter and mapMutations in Vuex with TypeScript without the need for class-style components syntax

I am confused about the term "can only be default-imported using the 'esModuleInterop' flag", could you explain it to me?

The element is inferred to have an 'any' type due to the fact that a 'string' type expression cannot be used to access elements in the type '{ Categories: Element; Admin: Element; }'

Encountering a "subscribe is not a function" error while attempting to utilize a JSON file in Angular 2

To initiate the development environment, execute the following command: `cross-env NODE_ENV=

Guide on uploading an image file through ReactJS to an api integrated with NestJS utilizing the bytea datatype

Angular 2 GET request returns a 404 error

Intercept Axios Responses - Retrieving API Responses for HTTP Statuses that are not in the 200 range

What steps can be taken to resolve the error message "How can you repair 'Cannot read properties of undefined (reading 'front_default')'?"

How can we avoid excessive re-rendering of a child component in React when making changes to the parent's state?

Using React and Typescript: Populating an array within a For Loop using setTimeout is not happening sequentially or at all

Vue's span function is yielding the promise object

Exploring the power of Typescript and Map in Node.js applications

Random Angular template string that does not contain a templateRef

What is the best way to account for the 'elvis operator' within a given expression?

Unlocking the union of elements within a diverse array of objects

In TypeScript, values other than numbers or strings can be accepted as parameters, even when the expected type is a

The reference to "joiner" property cannot be found in the type "{}"

What is the best way to use an Observable to interrogate a fork/join operation?