ChatContext.js

import React, {createContext, useState} from 'react';
import firebase from '../firebase';

export const ChatContext = createContext();

const ChatContextProvider = (props) => {
    
    //Firebase settings
    const DB = firebase.firestore();
    const chatRef = DB.collection("chats");
    
    //States
    const [chatList, setChatList] = useState([]);
    //console.log(chatList);
    
    //Method to fetch chat list from Firebase
    const getChatList= () => {
        if('chats' in localStorage) {
            const chats = JSON.parse(localStorage.getItem('chats')); 
            setChatList([chats]);
        }
        
        chatRef
            .doc('JyNeS95OnZ3qLDno3EVd')
            .onSnapshot((querySnapshot) => {
                setChatList([querySnapshot.data().c]);
                localStorage.setItem('chats', JSON.stringify(querySnapshot.data().c));
            });
    }
    
    return (
        <ChatContext.Provider value={{chatList, getChatList}}>
            {props.children}
        </ChatContext.Provider>

    );
}

export default ChatContextProvider;