I created Context to store my user login info and other details but i am getting error
Uncaught TypeError: Cannot destructure property ‘children’ of ‘_ref’ as it is undefined.
I don’t know why this is giving error i read from some article that this children variable is null while i am accessing it, I am not sure about the error and how to fix it.
Please help me fix it.
Here is my Context File
import { createContext, useContext, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
const ChatContext = createContext();
const ChatProvider = ({children})=>{
// {children ='empty'}=children||
const history = useHistory();
const [user,setUser] = useState();
const [selectedChat,setSelectedChat] = useState();
const [chats,setChats] = useState([]);
useEffect(()=>{
const userInfo = JSON.parse(localStorage.getItem("userInfo"));
setUser(userInfo);
if(!userInfo){
history.push('/')
}
},[history]);
return(
<ChatContext.Provider value={{user,setUser,selectedChat,setSelectedChat,chats,setChats}}>
{children}
</ChatContext.Provider>
)
};
export const ChatState=()=>{
return useContext(ChatContext);
}
export default ChatProvider
Here is the File which is giving error upon accessing this Context
import React from 'react'
import ScrollableFeed from "react-scrollable-feed";
import { isLastMessage, isSameSender } from '../config/ChatLogic';
import ChatState from "../Context/ChatProvider"
import { Avatar, Tooltip } from '@chakra-ui/react'
const ScrollableChat = ({ messages }) => {
console.log(messages);
const { user } = ChatState();
console.log(user);
return (
<ScrollableFeed>
{messages &&
messages.map((message, i) => (
<div style={{ display: "flex" }} key={message._id}>
{(isSameSender(messages, message, i, user._id) ||
isLastMessage(messages, i, user._id)) && (
<Tooltip label={message.sender.name} placement="bottom-start" hasArrow>
<Avatar
mt="7px"
mr={1}
size="sm"
cursor="pointer"
name={message.sender.name}
src={message.sender.pic}
/>
</Tooltip>
)}
</div>
))}
</ScrollableFeed>
)
}
export default ScrollableChat;
