Whenever we want to store to keep your states or variables and we have to use them elsewhere in our program ,we use context.
When we have two or more levels(height) in our component tree, it is viable to use a store instead of passing props and then lifting the state as this will create confusion and unnecessary lengthy code
Code:
import * as React from "react";
export interface MarksContext{
name: string;
marks: number;
}
const contextmarks = React.createContext<MarksContext | null>(null);
export const MarksContextProvider = contextmarks.Provider;
export const MarksContextConsumer = contextmarks.Consumer;