Question 285777 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to use createContext in react typescript?

There is an error in React.createContext() but when I declare an object React.createContext({}) no error then.

Mouse over "An argument for ‘defaultValue’ was not provided.
function React.createContext(defaultValue: unknown): React.Context"

import React, { useState, useContext } from 'react';

const AppContext = React.createContext(); `here is the error in createContext`

const AppProveider = ({ children }: any) => {
  return <AppContext.Provider value={{}}>{children}</AppContext.Provider>;
};
export { AppContext, AppProveider };
Tags:

2

Answers


  1. 0

    Hi that error is thrown by Typescript, meaning that the hook createContext need a defined type at his declaration.

    Actually if u see in react package

      function createContext<T>(
     defaultValue: T,
  ): Context<T>;

    As you can see the createContext Hook get a Generic which is assigned to a required property so without it ts will throw the error.

    I spent some minute to implement a simple contex as example: Stackblitz

    Login or Signup to reply.
  2. 0

    It looks like you are encountering an error because of the React.createContext() function requires a default value to be passed as an argument. When you pass an empty object as the default value, the error goes away because you have provided a valid default value.

    The error message you are seeing indicates that the defaultValue argument is missing when you use React.createContext(). To resolve this issue, you should provide a default value when creating the context.

    Here’s an example of how you can do it:

    import React, { useState, useContext } from 'react';

// Provide a default value for the context
const AppContext = React.createContext({});

const AppProvider = ({ children }: any) => {
    return <AppContext.Provider value={{ /* your initial context value*/ 
  }}>{children}</AppContext.Provider>;
};

export { AppContext, AppProvider };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search