how to useContext in react/nextjs with typescript

Question

I'm new to the typescript world and I'm creating a new project in nextjs using typescript and wanted to add auth functionality with it so I'm using createContext I previously used javascript where we don't need to define default value while creating context. these are some errors I'm getting in my vscode please if someone mentors me with code it would be great.

full AuthContext.tsx

    import { createContext, useEffect, useState } from "react";

import React from 'react'
import { setCookie } from 'cookies-next';
import { useRouter } from "next/router";


const AuthContext = createContext();


export function AuthProvider({ children }: any) {
  const [user, setUser] = useState(null)
  const [error, setError] = useState(null)

  const router = useRouter()

  useEffect(() => {
    checkUserLoggedIn();
  }, []);

  const logout = async () => {

  }

  const login = async (vals: object) => {

  }

  const register = async (vals: object) => {
 
  }

  const checkUserLoggedIn = async () => {

  }

  return (
    <AuthContext.Provider value={{ user, error, register, login, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

export default AuthContext

my login.tsx

import AuthContext from '../context/AuthContext'
import { useContext, useEffect } from 'react';

const Login = () => {



  const { login, error } = useContext(AuthContext)

  useEffect(() => error && toast.error(error))

And for the user variable, I only need this object

{
   username:"ansh3453",
   id:43
}

CoolLife · Accepted Answer · 2022-08-25 14:48:33Z

1

well you need a type you can put this on your types, I think here you need add your error and user object here:

export type CustomizationProps = {
    user: any, 
    error: any,
    logout: () => void;
    login: (vals: object) => void;
    register: (vals: object) => void;
    checkUserLoggedIn : () => void;
};

after need create the context, you can add your user and error here too, before create the context:

const initialState: CustomizationProps = {
    user: any, 
    error: any,
    logout: () => {},
    login: () => {},
    register: () => {},
    checkUserLoggedIn : () => {}
}; 

const ConfigContext = createContext(initialState);

now for your function

type ConfigProviderProps = {
   children: React.ReactNode;
};

export function AuthProvider({ children }: ConfigProviderProps) {
  const [user, setUser] = useState(null)
  const [error, setError] = useState(null)

  const router = useRouter()

  useEffect(() => {
    checkUserLoggedIn();
  }, []);

  const logout = async () => {

  }

  const login = async (vals: object) => {

  }

  const register = async (vals: object) => {
 
  }

  const checkUserLoggedIn = async () => {

  }

  return (
    <AuthContext.Provider value={{ user, error, register, login, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

export default AuthContext

I guess this is an example not easy to write but you should add your error and user to the type

edited Aug 25, 2022 at 14:48

answered Aug 25, 2022 at 14:32

CoolLife

1,4895 gold badges19 silver badges47 bronze badges

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

7 Comments

Ansh Rathod Over a year ago

thanks so much for your reply!, now I know the actual format for writing createContext in typescript but I'm still getting this error in vscode.

Ansh Rathod Over a year ago

image

CoolLife Over a year ago

@AnshRathod do you added the user and error in the type?

CoolLife Over a year ago

I cant see your image

Ansh Rathod Over a year ago

no I didn't add the user and error, refresh screen i added a screenshot of the image.

|

Shea Hunter Belsky · Accepted Answer · 2022-08-25 14:21:18Z

0

The error is really self-descriptive:

Expected 1 arguments, but got 0.

An argument for 'defaultValue' was not provided

createContext requires an argument that sets the default value of the Context if it ever imported outside the boundaries of a Context Provider.

Take a look at the React documentation for createContext: https://reactjs.org/docs/context.html#reactcreatecontext

answered Aug 25, 2022 at 14:21

Shea Hunter Belsky

3,3182 gold badges22 silver badges33 bronze badges

Collectives™ on Stack Overflow

how to useContext in react/nextjs with typescript

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related