useReducer with useContext results with Typescript error

Question

I'm trying to create a context that holds state and reducer. But it gives me error messages on the return statement and I just don't know what to do:

Operator '<' cannot be applied to types 'boolean' and 'RegExp'.ts(2365)
Unterminated regular expression literal.ts(1161)

import { createContext, FunctionComponent, PropsWithChildren, ReactNode, useReducer } from "react";
import reducer from "./reducer";

// stored data
export type storeType = {
    message: string | null
};

const initialState: storeType = {
    message: null
}

const AppContext = createContext<storeType>(initialState);

const CxtProvider = ({ children }: PropsWithChildren) => {
    const [currentState, dispatch] = useReducer(reducer, initialState);

    return <AppContext.Provider value={{
        currentState,
        dispatch
    }}>{children}</AppContext.Provider>
};

export default CxtProvider;

Anyone knows, what I'm doing wrong? Thanks

EDIT1: Thanks for the idea, I tried spreading the object, but didn't help, there's even more error now.

Compiled with problems:

ERROR in src/utils/context/context.ts
TS1161: Unterminated regular expression literal.

ERROR in src/utils/context/context.ts:19:13
TS2503: Cannot find namespace 'AppContext'.

ERROR in src/utils/context/context.ts:19:33
TS1005: '>' expected.

ERROR in src/utils/context/context.ts:19:33
TS2304: Cannot find name 'value'.

ERROR in src/utils/context/context.ts:19:38
TS1005: ';' expected.

ERROR in src/utils/context/context.ts:20:9
TS1128: Declaration or statement expected.

ERROR in src/utils/context/context.ts:20:12
TS2304: Cannot find name 'currentState'.

ERROR in src/utils/context/context.ts:20:12
TS2695: Left side of comma operator is unused and has no side effects.

ERROR in src/utils/context/context.ts:21:9
TS2304: Cannot find name 'dispatch'.

ERROR in src/utils/context/context.ts:22:6
TS1128: Declaration or statement expected.

ERROR in src/utils/context/context.ts:22:7
TS1128: Declaration or statement expected.

ERROR in src/utils/context/context.ts:22:8
TS1109: Expression expected.

ERROR in src/utils/context/context.ts:22:8
TS2365: Operator '<' cannot be applied to types 'boolean' and 'RegExp'.

ERROR in src/utils/context/context.ts:22:10
TS18004: No value exists in scope for the shorthand property 'children'. Either declare one or provide an initializer.

ERROR in src/utils/context/context.ts:23:1
TS1128: Declaration or statement expected.

Have you tried wrapping the things you're returning in ()

RubenSmn
– RubenSmn

2023-01-23 11:10:01 +00:00
Commented Jan 23, 2023 at 11:10 — RubenSmn
– RubenSmn, Commented Jan 23, 2023 at 11:10
@RubenSmn yes I did, the result is still the same

sjiamnocna
– sjiamnocna

2023-01-23 14:30:37 +00:00
Commented Jan 23, 2023 at 14:30 — sjiamnocna
– sjiamnocna, Commented Jan 23, 2023 at 14:30

lpizzinidev · Accepted Answer · 2023-01-23 11:46:16Z

2

You should unwrap the currentState values:

return <AppContext.Provider value={{
          ...currentState,
          dispatch
       }}>{children}</AppContext.Provider>

answered Jan 23, 2023 at 11:46

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

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

2 Comments

sjiamnocna Over a year ago

Hmm... that didn't work. The errors stays

lpizzinidev Over a year ago

@sjiamnocna Can you post the reducer code?

sjiamnocna · Accepted Answer · 2023-01-23 18:34:57Z

-1

Finally it solved by diverting the parts into different files: context, reducer, provider. No idea why.

Thanks for ideas

I suppose the problem was somewhere in createContext type didn't have the reducer member

answered Jan 23, 2023 at 18:34

sjiamnocna

3493 silver badges18 bronze badges

2 Comments

birdy90 Over a year ago

the problem here was using JSX syntax inside TS file. you needed TSX extension instead

v3nt Over a year ago

i have this issue even with tsx extension.

Collectives™ on Stack Overflow

useReducer with useContext results with Typescript error

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related