Question 345261 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Typescript Error, Type 'string' is not assignable to type 'SetStateAction<null>'

I am creating a global context for my project and I am using typescript. I am new to typescript. I am following the outline as mentioned in the following blog (https://atakansava.medium.com/using-react-context-with-nextjs-288bde71f807). I keep getting this error "Type ‘string’ is not assignable to type ‘SetStateAction’" and I dont understand why. I think I am doing everything right. The ‘sendURLToEtsy’ global variable can either be a string, or it can be null. and in the ‘setSendURLToEtsy’ I declare that it can be either a null or a string. But when I try to pass setSendURLToEtsy to the context provider, it gives me an error. I want the option of being able to set sendURLToEtsy to be either a null, or a string

"use client";

import { createContext, useContext, useState } from 'react';

//https://atakansava.medium.com/using-react-context-with-nextjs-288bde71f807

interface globalState {
    isLoading: boolean;
    isError: boolean;
    errorMessage: string | null;
    sendURLToEtsy: string | null;
    setIsError: React.Dispatch<React.SetStateAction<boolean>>;
    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
    setErrorMessage: React.Dispatch<React.SetStateAction<string>>;
    setSendURLToEtsy: React.Dispatch<React.SetStateAction<null | string>>;
}

export const globalContext = createContext<globalState>({
    isLoading: false,
    isError: false,
    errorMessage: "Default Error Message Context",
    sendURLToEtsy: null,
    setIsError: () => {},  
    setIsLoading: () => {},  
    setErrorMessage: () => {},
    setSendURLToEtsy: () => {},   
});

export default function GlobalContextProvider({children}: {children: React.ReactNode;}) {

    const [isError, setIsError] = useState(false)
    const [isLoading, setIsLoading] = useState(false)
    const [errorMessage, setErrorMessage] = useState("Default Error Message Context")
    const [sendURLToEtsy, setSendURLToEtsy] = useState(null)

    return <globalContext.Provider value={{
        isLoading: isLoading,
        isError: isError,
        errorMessage: errorMessage,
        sendURLToEtsy: sendURLToEtsy,
        setSendURLToEtsy,    <<========= This line is underlined red
        setIsError,
        setIsLoading,
        setErrorMessage,
    }}>
        {children}
    </globalContext.Provider>
}

export const useGlobalContext = () => useContext(globalContext);
Tags:

2

Answers


  1. 0

    i think typescript is inferring this as null

    const [sendURLToEtsy, setSendURLToEtsy] = useState(null)

    instead, initialize explicitly

        const [sendURLToEtsy, setSendURLToEtsy] = useState<string | null>(null)
    Login or Signup to reply.
  2. 0

    By default useState will infer its type through initial value parameter, so when you create:

    const [sendURLToEtsy, setSendURLToEtsy] = useState(null)

    setSendURLToEtsy will be defined as React.Dispatch<SetStateAction<null>> because TypeScript infered null from useState parameter.

    To match the globalState.setSendURLToEtsy type with your state definition you must explicitly define useState expected values using.

    const [sendURLToEtsy, setSendURLToEtsy] = useState<string | null>(null)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search