React contexts with array hooks

Question

I'am having problem with this contexts.

At

<RubroContext.Provider  value={ {rubro,setRubro} } >

I got this errer message:

The type '{ rubro: itemRybri[]; setRubro:
React.Dispatch<React.SetStateAction<itemRubro[]>>; }' cannot be
assigned to type 'Partial<RubroType>'.
 
The object literal can only specify known properties, but "rubro" does
not exist in type "Partial<RubroType>"

interface:

  export interface itemRubro {
    rubro:string
    radius:string
    description:string
    calificacion:number
    pais:string
    provincia:string
    ciudad:string
    calle:string
    numeracion:string
    days_of_works:string
    hour_init:string
    hour_end:string
    certificate:string
    picture1:string
    picture2:string
    picture3:string

  }

  export type RubroType = {
    rubros: itemRubro [];
    setRubro: Dispatch<SetStateAction<itemRubro []>>;
  }

This is the context definition:

export const  RubroContext = createContext <Partial<RubroType>>({});

export const useUserContext = () => useContext(RubroContext);

The app.tsx

const App: React.FC = () => {

 const [rubro,setRubro] = useState <itemRubro[]> ([])

 useEffect(() => {

getItem("infoRubro1").then(res2 => {
          setRubro1(res2)
          setRubro([...rubro, {
            rubro:res2.rubro,
            radius:res2.radius,
            description:res2.description,
            calificacion:res2.calificacion,
            pais:res2.pais,
            provincia:res2.provincia,
            ciudad:res2.ciudad,
            calle:res2.calle,
            numeracion:res2.numeracion,
            days_of_works:res2.days_of_works,
            hour_init:res2.hour_init,
            hour_end:res2.hour_end,
            certificate:res2.certificate,
            picture1:res2.picture1,
            picture2:res2.picture2,
            picture3:res2.picture3,
            }])
        })
        getItem("infoRubro2").then(res2 => {
          setRubro2(res2)
          setRubro([...rubro, {
            rubro:res2.rubro,
            radius:res2.radius,
            description:res2.description,
            calificacion:res2.calificacion,
            pais:res2.pais,
            provincia:res2.provincia,
            ciudad:res2.ciudad,
            calle:res2.calle,
            numeracion:res2.numeracion,
            days_of_works:res2.days_of_works,
            hour_init:res2.hour_init,
            hour_end:res2.hour_end,
            certificate:res2.certificate,
            picture1:res2.picture1,
            picture2:res2.picture2,
            picture3:res2.picture3,
            }])
        })
}, []);


    <RubroContext.Provider  value={ {rubro,setRubro} } >
       <SomeOtherComponets >
    </RubroContext.Provider >

Answer 1

With context and TypeScript, using Partial for the context type will throw your downstream types off. If you're doing that just because you must pass something to createContext, I'd recommend passing an empty object and asserting that it's of the proper type.

export const RubroContext = createContext({} as RubroType);

This way, consumers of RubroContext will assume that it contains all the properties they're expecting - and it's still type-safe as long as you provide the context in a parent component - that is, with

<RubroContext.Provider  value={ {rubro,setRubro} } >

The type assertion only wouldn't be safe if it the context was being consumed without being provided, which is pretty unusual, at least in my experience. (If you're in a situation where the context will sometimes be used without being provided, then you should change the createContext call to provide all the needed information at that point - which, granted, is difficult at the top level in React)