Error when destructuring values from useContext in TypeScript

Question

I'm a bit new to TypeScript, but I LOVE it.

When I try to destructure my Context in React using useContext I get some errors that I don't know why I'm getting.

The error: Property 'nftContract' does not exist on type 'Web3 | null'.ts(2339)

Context File

export interface Web3 {
  gameContract: Contract | string;
  nftContract: Contract | string;
  provider: Provider | string;
  account: string;
  etherBalance: string;
  setWeb3?: React.Dispatch<React.SetStateAction<Web3>>;
}

export const Web3Context = createContext<Web3 | null>(null);

export const Web3Provider: React.FC = ({ children }) => {
  const [
    { gameContract, nftContract, provider, account, etherBalance },
      setWeb3
    ] = useState<Web3>({
      gameContract: '',
      nftContract: '',
      provider: '',
      account: '',
      etherBalance: ''
  });

  return (
    <Web3Context.Provider
        value={{
            provider,
            gameContract,
            nftContract,
            account,
            etherBalance,
            setWeb3
        }}
    >
        {children}
    </Web3Context.Provider>
  );

File consuming Context (Context has been wrapped properly in the main index/app file.)

const MintNFTForm = () => {
   // Property 'nftContract' does not exist on type 'Web3 | null'.ts(2339)
   const { nftContract } = useContext(Web3Context);
}

Anything helps,thank you!

Ross Allen · Accepted Answer · 2021-09-27 19:28:14Z

3

Destructure the value only after it has been checked for not being null:

const MintNFTForm = () => {
   const ctxt = useContext(Web3Context);
   if (ctxt == null) return <div>No context yet</div>;

   // `ctxt` is now guaranteed to not be `null`, safe to destructure
   const { nftContract } = ctxt;
}

The code is initializing the context's value to null and declaring that its type can be null so any code referencing it must account for that case:

export const Web3Context = createContext<Web3 | null>(null);

answered Sep 27, 2021 at 19:28

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

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

7 Comments

Adrian D. Over a year ago

Oh awesome, thank you! I'll try this. How can I set the createContext value to be empty? I would like for it to not have the value null & just the Web3, but I also would like to not pass anything to createContext. Is there a way to leave it blank? When I try to leave it blank it complains that it needs to be passed in 1 arguement.

Adrian D. Over a year ago

The error I get if I change it to export const Web3Context = createContext<Web3>(); is: Expected 1 arguments, but got 0.ts(2554) index.d.ts(383, 9): An argument for 'defaultValue' was not provided.

Adrian D. Over a year ago

I would also like to be able to restructure the context without having to check for null since it'd be a lot cleaner to do so.

Ross Allen Over a year ago

What is a Web3? Is there a default Web3 you can pass to createContext? "Cleaner" is a subjective term here; checking for null is correct since the value is initialized to null, this looks clear to me!

Adrian D. Over a year ago

Web3 is something in Blockchain. Based on your example: what if I wanted to not return anything because my component has other stuff it needs to render?

|

Collectives™ on Stack Overflow

Error when destructuring values from useContext in TypeScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related