napalmj / ReactContextAPIDefect

Provider

export const Provider: React.FC = ({ children }) => {
  return (
    <FormContext.Provider value={{ name: 'Value From The Provider' }}>
      {children}
    </FormContext.Provider>
  );
};

Consumer

export const Consumer: React.FC = () => {
  const { name } = React.useContext(FormContext);
  const shouldPrint = `Name is: ${name}`;
  return <>{shouldPrint}</>;
};

Hooks

export interface ContextProps {
  name: string;
}

export const FormContext = createContext<ContextProps>({} as ContextProps);

export const useName = () => useContext(FormContext);