Argument of type 'null' is not assignable to parameter of type

Question

I have been working on this modern carousel which i found from this reference https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-carousel

But then i come across this issue "Argument of type 'null' is not assignable to parameter of type"

export const WebpartContext = createContext<IAwardRecognitionProps>(null);

IAwardRecognitionProps

export interface IAwardRecognitionProps {
  webpartTitle: string
  contentTitle: string
  contentDescription: string
  isDarkTheme: boolean
  environmentMessage: string
  hasTeamsContext: boolean
  userDisplayName: string
  animationChoice: string
  cardType: string
}

AwardRecognition.tsx

import * as React from "react";
import { IAwardRecognitionProps } from "./IAwardRecognitionProps";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import { Carousel } from "../../../components/Carousel"
import { createContext } from "react";

export const WebpartContext = createContext<IAwardRecognitionProps>(null);

export const AwardRecognition = (props: IAwardRecognitionProps): JSX.Element => {
  return (
    <WebpartContext.Provider value={props}>
      <FluentProvider
        theme={webLightTheme}
        style={{ width: "100%", background: "none" }}
      >
        <Carousel />
      </FluentProvider>
    </WebpartContext.Provider>
  );
};

Context.tsx

'contextInfo' is possibly 'undefined'.

import * as React from "react";
import { Text } from "@fluentui/react-components";
import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss";
import { ContentProps } from "../types/ContentProps"
import { useContext } from "react";
import { WebpartContext } from "../webparts/awardRecognition/components/AwardRecognition";

export const Content = ({ user }: ContentProps): JSX.Element => {
  const contextInfo = useContext(WebpartContext);

  return (
    <section className={styles.contentWrapper}>
      <Text size={600} weight="semibold">
        {contextInfo.webpartTitle}
      </Text>
      <div className={styles.contentDescriptionWrapper}>
        <Text size={400} weight="semibold" className={styles.contentTitle}>
          {contextInfo.contentTitle}
        </Text>
        <Text size={300}>{contextInfo.contentDescription}</Text>
      </div>

      <div className={styles.userInfo}>
        <Text size={800} weight="semibold" className={styles.userName}>
          {user?.Title}
        </Text>
        <Text size={400}>{user?.Designation}</Text>
      </div>
    </section>
  );
};

Answer 1

The error occurs because TypeScript is strict about the types and does not allow null as an initial value for a context that expects a specific type (IAwardRecognitionProps in your case).

To resolve this, you can provide a default value that matches the expected type. If you don't have an initial value, you can use undefined as an initial value by setting the type to include undefined.

Allow undefined as a possible type:

export const WebpartContext = createContext<IAwardRecognitionProps | undefined>(undefined);

With this you will have to check if property under the object is undefined or not. And for that you can use your return method somewhat like this (I guess it is Optional Chaining concept):

return ( <div> 
{contextInfo?.webpartTitle? 
( <p>{contextInfo.webpartTitle}</p> ) 
: ( <p>Loading...</p> )} </div> );

OR

Define a default value:

// Define a default value that matches IAwardRecognitionProps 
const defaultContext: IAwardRecognitionProps = { 
   // Provide default values for all properties 
   webpartTitle: '', 
   contentTitle: '', 
   // other properties... 
}; 

export const WebpartContext = createContext<IAwardRecognitionProps>(defaultContext);