react useContext implementation with hook

Question

I have this definition

  export interface user{
    email:string
    name:string
    last_name:string
  }  

  export type UserType= {
    user: user;
    setUser:(user:user) => void;
  }

const [user,setUser] = useState <user> ({
    email:"",
    name:"",
    last_name:"",
   
})

export const  UserContext = createContext <UserType>({user,setUser});

Then in App.tsx

    function App() {
 const [user,setUser] = useState <usuario> ({
        email:"",
        name:"",
        last_name:"",
        
 })
    
    return 
      (
  <UserContext.Provider  value={ {user,setUser} } >
         <Home/> 
        <About/>
      </UserContext.Provider>
      )
    }
    export default App

At home there is the problem because I need to set the email so:

export const Home= () => {
    const {user,setUser} = useContext(UserContext)
    /*....... Some code*/

    setUser((state) => ({ ...state, email: email.current }))

}

whith the sentence setUser((state) => ({ ...state, email: email.current }))

An argument of type "(state: any) => any" cannot be assigned to a parameter of type "user". The type "(state: any) => any" is missing the following properties of the type "user": email, name and last_name.

and it does not work with this: setUser((state:user) => ({ ...state, email: email.current }))

Ori Drori · Accepted Answer · 2022-03-05 10:15:03Z

1

Your current definition of setUser ignores the ability to pass a function. You'll need to define the setUser type to be identical to the one produces from useState:

import { SetStateAction, Dispatch } from 'react';

export interface UserType {
  user: User;
  setUser: Dispatch<SetStateAction<User>>;
}

answered Mar 5, 2022 at 10:15

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Collectives™ on Stack Overflow

react useContext implementation with hook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related