CODEWITHSUNDEEP
reactjstypescript
Joshua Reisbord
Joshua Reisbord

Reputation: 131

ReactJS and Typescript useContext - property does not exist on type

I am attempting to create a login page where a user presses a button, and the state is updated using useContext. I have followed a few tutorials online and did my rounds looking for an explanation or solution to no avail. The issue I am running into currently is the compiler is saying in login_spotify.tsx the property setUser does not exist on type 'User'. What would be suggested for me to update the state with the new one in login_spotify.tsx.

Hopefully, my program will grow and become more complex, so instead of just passing the props down, useContext will be needed.

My code is as follows:

app.tsx

import React, { useState } from 'react';
import './App.css';

import { UserContext } from '../Context';
import { User} from '../Types';

import { defaultUser } from '../../constants/defaults';
import { SpotifyLoginButton } from '../Buttons';

function App() {
    const [ user, setUser ] = useState<User>(defaultUser);
    return (
        <div className="window">
            <h1>{user.name}</h1>
            < UserContext.Provider value={{user, setUser}}>
                <SpotifyLoginButton />
            </UserContext.Provider>
        </div>
    );
}

export default App;

user_context.tsx

import { createContext } from "react";

import { defaultUser } from "../../constants/defaults";

const UserContext = createContext(defaultUser);

export { UserContext }

login_spotify.tsx

import React, { useContext } from "react";
import Button from '@material-ui/core/Button';
import { UserContext } from "../Context";

function SpotifyLoginButton() {

    const {user, setUser} = useContext(UserContext);

    return (
        <Button variant={"outlined"} 
                color={'primary'} 
                onClick={() => { 
                    setUser({
                        email: "[email protected]",
                        image: "something",
                        name: "Jane Doe",
                        tokens: {
                            accessToken: "abc123",
                            refreshToken: "def234",
                        },
                    });
                }}>
            Login with Spotify
        </Button>
    );
}

export default SpotifyLoginButton

types.tsx

export type User  ={
    email: string | null;
    image: string | null;
    name: string | null;
    tokens: {
        accessToken: string | null;
        refreshToken: string | null;
    };
}

defaults.tsx

import { User } from '../components/Types';

// default user
export const defaultUser: User = {
    email: null,
    image: null,
    name: null,
    tokens: {
        accessToken: null,
        refreshToken: null,
    },
};

Upvotes: 4

Views: 6319

Answers (1)

yuchang
yuchang

Reputation: 86

you should init the setUser function when creating context

const UserContext = createContext({
    user: defaultUser,
    setUser: (user: User) => {}
})

Upvotes: 6

Related Questions