how to invoke wrapper with children component in react?

Question

My children component is:

interface AuthContextType {
user: any;
signin: (user: string, callback: VoidFunction) => void;
signout: (callback: VoidFunction) => void;
}

let AuthContext = React.createContext<AuthContextType>(null!);

interface WithChildren {
children: ReactNode;
}

function AuthProvider(props:WithChildren)  {
let [user, setUser] = React.useState<any>(null);

let signin = (newUser: string, callback: VoidFunction) => {
  return authProvider.signin(() => {
    setUser(newUser);
    callback();
  });
};

let signout = (callback: VoidFunction) => {
  return authProvider.signout(() => {
    setUser(null);
    callback();
  });
};

let value = { user, signin, signout };


return <AuthContext.Provider value={value}>{props.children}</AuthContext.Provider>;
}

I try to invoke it like:

<AuthProvider>
...
</AuthProvider>

I get error:

"JSX element type 'AuthProvider' does not have any construct or call signatures."

Can you help me solve it and told me why it is like this ? how to invoke Wrapper with children component in any Component in react?

@ghybs, this is spell mistake when I ask question, I already correct it. — user504909, Nov 19 '22 at 07:37
@user504909 You say you've posted all your code, so I'm going to take your word. ` ... ` is not valid syntax and I'm going to vote to close the question due to typos. — possum, Nov 19 '22 at 11:28
I just tried your code my dear and it just works fine. No typescript errors thrown. — kind user, Nov 19 '22 at 11:35

score 0 · Answer 1 · answered Nov 19 '22 at 17:42

I also solve it. I think that is the react version problem. this code I try to run on react 18.

I use react.FC to reorgnize the function componenet:

before:

function AuthProvider(props:WithChildren)

change to:

const AuthProvider : React.FC<WithChildren> = ({children}) =>{
...
}

I think some definations change in react 18, like before 18 version the children prop was already defined as an optional property in React.FC type. But in version 18, it React.FC remove children props.

how to invoke wrapper with children component in react?

1 Answers1