Get error when using createContext with typescript

Question

I am trying to make a context with hooks in react with typescript like this:

// StateGlobalContext.ts
import React, { Dispatch, ReactNode, SetStateAction } from "react";

export interface StateGlobalContextType {
  loading: boolean
  setLoading: Dispatch<SetStateAction<boolean>>
}

export const StateGlobalContext = React.createContext<StateGlobalContextType>({} as StateGlobalContextType);

export default function StateGlobalProvider({ children: ReactNode }): React.FC<ReactNode> {
  const [loading, setLoading] = React.useState<boolean>(false);

  return (
    <StateGlobalContext.Provider value={{ loading, setLoading }}>
      {props.children}
    </StateGlobalContext.Provider>
  )
}

But for some reason i don't know why, return get problem like this

Type '{}' is missing the following properties from type 'ReactElement<any, any>': type, props, key

and i cannot declare StateGlobalContext.Provider, the error message like this

Cannot find namespace 'StateGlobalContext'

Ben Rauzi · Accepted Answer · 2022-05-07 06:41:45Z

1

This is an error to do with how you're handling your props input.

When destructuring in Typescript doing { children: ReactNode } destructures the children attribute from props, assigning it to a variable called ReactNode. Then, rather than calling ReactNode (which would still be an error because you've imported it too), you're using props.children, which is not defined.

Instead use the syntax: { children }: { children: ReactNode }, although this is easier if you use an interface.

import React, { Dispatch, ReactNode, SetStateAction, createContext } from "react"

export interface StateGlobalContextType {
    loading: boolean
    setLoading: Dispatch<SetStateAction<boolean>>
}

export const StateGlobalContext = createContext<StateGlobalContextType>({} as StateGlobalContextType)

interface StateGlobalProviderProps {
    children: ReactNode
}
const StateGlobalProvider: React.FC<StateGlobalProviderProps> = ({ children }: StateGlobalProviderProps) => {
    const [loading, setLoading] = React.useState<boolean>(false)

    return <StateGlobalContext.Provider value={{ loading, setLoading }}>{children}</StateGlobalContext.Provider>
}

export default StateGlobalProvider

Also, rather than declaring the return type of function as React.FC<ReactNode>, declare the component itself as type React.FC<StateGlobalProviderProps>

answered May 7, 2022 at 6:41

Ben Rauzi

6146 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kholiq Over a year ago

That solves the return problem, StateGlobalContext.Provider problem is not over yet, but thank you @Ben Rauzi

Kholiq Over a year ago

The context problem has been solved, i follow this article bobbyhadz[dot]com/blog/react-cannot-find-namespace-context

Collectives™ on Stack Overflow

Get error when using createContext with typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related