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

Having trouble getting material-ui container to work with custom breakpoints in TypeScript?

Unable to display information stored in the Firebase database

Setting up tsconfig.json to enable support for either string literals or string templates involves adjusting the compiler options

Creating a personalized theme for Material UI 5.0 using Typescript with React

How can one pass a generic tuple as an argument and then return a generic that holds the specific types within the tuple?

Tips for Modifying the currentUrl identifier in Angular 2

The module "ng-particles" does not have a Container component available for export

Struggling with my React project, feeling stuck and unsure how to move

Retrieve the value of a promise and transfer it to the subsequent function of an observable

Unable to fetch data from URL in Angular using the HttpClientModule

Issue: Module 'stylelint' not found in Angular Project

Are push notifications supported in Ionic3?

You cannot assign void to a parameter expecting a function with no return value

How can you reposition a component within the dom using Angular?

After the transition from Angular 8 to Angular 9, an issue arose with the node_modules/@zerohouse/router-tab/zerohouse-router-tab.d.ts file, as it was not declared

Having issues with your Typescript in Sublime Text?

Touch gestures using Hammer.js including tapping and swiping downwards

Looking to display parent and child elements from a JSON object using search functionality in JavaScript or Angular

"Handling dependency injection with cyclic dependencies along with a custom implementation of HTTP and ConfigService

The combination of TypeScript 2.6 and material-ui 1.0.0-beta.24's withStyles with react-router withRouter is resulting in the error message: "Property 'classes' is missing in type."