[Basic] : appContext is possibly null ?

[Ala Eddine Menai]

Site

react typescript cheatsheet

Section

Basic

Page

Context

Snippet

import { createContext } from "react";

interface AppContextInterface {
  name: string;
  author: string;
  url: string;
}

const AppCtx = createContext<AppContextInterface | null>(null);

// Provider in your app

const sampleAppContext: AppContextInterface = {
  name: "Using React Context in a Typescript App",
  author: "thehappybug",
  url: "http://www.example.com",
};

export const App = () => (
  <AppCtx.Provider value={sampleAppContext}>...</AppCtx.Provider>
);

// Consume in your app
import { useContext } from "react";

export const PostInfo = () => {
  const appContext = useContext(AppCtx);
  return (
    <div>
      Name: {appContext.name}, Author: {appContext.author}, Url:{" "}
      {appContext.url}
    </div>
  );
};

Issue location

  // appContext is possibly null?!
  <div>
      Name: {appContext.name}, Author: {appContext.author}, Url:{" "}
      {appContext.url}
    </div>

Reproduce

Try Typescript Playground

Recommended PR

Add non-nullish assertion symbol ! after appContext.

[Gaurav Munjewar]

Hey there, If the issue is still open I'd like to work on it.