TypeScript React createContext() default value

Question

I been kinda stumped for a couple hours trying to figure out what to set as my default value on my createContext function. This is my code.

// PetTypeProvider.tsx
import { useState, createContext, useContext } from 'react';

const PetTypeContext = createContext('');

const UpdatePetTypeContext = createContext((event:React.MouseEvent<HTMLElement>) => event);

export function usePetType() {
  return useContext(PetTypeContext)
}

export function useUpdatePetType() {
  return useContext(UpdatePetTypeContext)
}


interface PetTypeProviderProps {
  children: JSX.Element|JSX.Element[];
}

export const PetTypeProvider: React.FC<PetTypeProviderProps> = ({children}) => {
  const [petType, setPetType] = useState('Dogs');
  const togglePet = (event:React.MouseEvent<HTMLElement>) => setPetType(event.currentTarget.innerText);
  return (
    <PetTypeContext.Provider value={petType}>
      <UpdatePetTypeContext.Provider value={togglePet}>
        {children}
      </UpdatePetTypeContext.Provider>
    </PetTypeContext.Provider>
  );
};

On my <UpdatePetTypeContext.Provider> I set the value to my toggle function, which switches the pet type to which ever is selected.

  const togglePet = (event:React.MouseEvent<HTMLElement>) => setPetType(event.currentTarget.innerText);

TS compiler is yelling at me with this

Type '(event: React.MouseEvent<HTMLElement>) => void' is not assignable to type '(event: React.MouseEvent<HTMLElement>) => React.MouseEvent<HTMLElement, MouseEvent>'.
  Type 'void' is not assignable to type 'MouseEvent<HTMLElement, MouseEvent>'.ts(2322)
index.d.ts(329, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<(event: MouseEvent<HTMLElement, MouseEvent>) => MouseEvent<HTMLElement, MouseEvent>>'

Thanks for taking the time to read my issue

I have tried setting the to const PetTypeContext = createContext(MouseEvent); which didn't work. I honestly just need the correct default value and data type for TS and I am just lost. The code works, but TS compiler doesn't like it since no default value is given.

Guillaume Brunerie · Accepted Answer · 2022-11-14 21:43:46Z

1

Try the following

const UpdatePetTypeContext = createContext((event:React.MouseEvent<HTMLElement>) => {});

You want to have a function that returns nothing, not a function that returns the event itself.

answered Nov 14, 2022 at 21:43

Guillaume Brunerie

5,4923 gold badges26 silver badges37 bronze badges

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

1 Comment

codePnk Over a year ago

Thanks! That makes sense that you put it that way. Appreciate you taking the time.

Konrad · Accepted Answer · 2022-11-14 21:54:07Z

1

I'm pretty sure you don't want to return event from the handler

change:

(event:React.MouseEvent<HTMLElement>) => event

to:

(event:React.MouseEvent<HTMLElement>) => {}

edited Nov 14, 2022 at 21:54

answered Nov 14, 2022 at 21:42

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

2 Comments

kind user Over a year ago

void is a type, createContext expects a function - replace void with {}

Konrad Over a year ago

@kinduser you are right

Collectives™ on Stack Overflow

TypeScript React createContext() default value

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related