The code when I console.log(user) it returns undefined when it should return this... [{ id: 1, name: 'username' }] .
I don't know what is causing it to do so, if you have any idea please tell me anything I can do, maybe there are updates to the useContext thing, if so, please inform me. Thanks in advance!!
import {createContext, useState} from 'react'
const UsersContext = createContext()
export const UsersProvider = ({children}) => {
const {user, setUser} = useState([{
id: 1,
name: 'username'
}])
return <UsersContext.Provider
value={
{user}
}>{children}</UsersContext.Provider>
}
export default UsersContext
// The next File...
import UserItem from "./UserItem"
import {useContext} from 'react'
import UsersContext from "../context/UserContext"
function userList({handleDelete}) {
const {user} = useContext(UserContext)
return (
<div>
{console.log(user)}
</div>
)
}
export default UserListEnd of code...
import {createContext, useState} from 'react'
const UsersContext = createContext(null)
export const UsersProvider = ({children}) => {
// useState returns an array not object
// if you want to store one user, use an object
const [user, setUser] = useState({id: 1,name: 'username'})
// if you want to store mutiple users
const [user, setUser] = useState([{id: 1,name: 'username'}])
return <UsersContext.Provider value={{user}}>
{children}
</UsersContext.Provider>
}
export default UsersContext
// The next File...
import UserItem from "./UserItem"
import {useContext} from 'react'
import UsersContext from "../context/UserContext"
function userList({handleDelete}) {
const { user } = useContext(UserContext)
return (
<div>
// if you used an object
{user?.username}
// for array of objects
{user && user.map((user, i) => (<p key={i}>{user.username}</p>))}
</div>
)
}
export default UserList
The First thing you want to check is, make sure the UserList component are wrapped with UserProvider