Scoping issues with Context Provider using TypeScript

user_10024036 0
Viewed 383

I have been working on a React Context Provider, and trying to create a function within the Provider to pass along to components for use. However, when I attempt to write the function within the provider, it says that the variable with the type void cannot be passed onto value. When I do it this way, it does not throw this error:

import React, { useState, createContext, useEffect } from "react";

interface IUser {
    user: String;
    doSignup: (
        email: String,
        password: String,
        verifyPassword: String,
        name: String
    ) => void;
}

const doSignup = (
    email: String,
    password: String,
    verifyPassword: String,
    name: String
): void => {
    console.log(email, password, verifyPassword, name);
};

export const UserContext = createContext<IUser>({
    user: "",
    doSignup: doSignup,
});

const UserContextProvider: React.FC = (props) => {
    const [user, setUser] = useState("");

    return (
        <UserContext.Provider value={{ user, doSignup }}>
            {props.children}
        </UserContext.Provider>
    );
};

export default UserContextProvider;

But doing it this way will also create scoping issues, because on other functions I will need access to the setUser method being created by useState. I also cannot use the useState hook outside of the component.

Trying to figure out the best way to do this, and coming up short.

react-typescript typescript reactjs
1 Answers

I've been throught the same problem. This works for me:

interface IUserContext {
  foo: '';
  userData: {};
  updateFoo(foo: string): void;
  updateUserData(userData: Object): void;
}

export const UserFooContext = createContext<IUserContext>({
  foo: '',
  userData: {},
  updateFoo(foo: string) {
    return null;
  },
  updateUserData(userData: Object) {
    return null;
  },
});

Maybe you can use this schema in your context. I hope it helps

user_33074450
Related