Not able to store data in local storage and use it on page refresh in React

Question

I'am using Firebase version 8.10.0 as the DB in my app, and I succeeded to show the data in my page. So generally Firebase consumes useEffect to show the data.

Also I succeeded to drag and drop the positions of table that contains firebase data. By my pain is to store the drag and drop positions in state and that state should be stored in localStorage.

My destination is to create a separate state that to be stored dragged items in localStorage. I tried this code but no result:

import React, { useState, useEffect, useRef } from "react";
import "./BootTable.css";
import "./Appa.css";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import firebaseDB from "./firebased";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

function App() {
  const dragItem = useRef();
  const dragOverItem = useRef();
  const [getData, setGetData] = useState({});

  //To Show the data    
  useEffect(() => {
    firebaseDB.child("register").on("value", (details) => {
      console.log(details.val());
      setGetData(details.val());
    });
  }, []);
 
  //To Store the dragged data into localStorage
  useEffect(() => {
    const data = window.localStorage.getItem("MY_DRAGGED_DATA");
    if (data !== null) setGetData(JSON.parse(data));
  }, []);
   
 //To set the item to localstorage

  useEffect(() => {
    console.log("show data", getData);

    window.localStorage.setItem("MY_DRAGGED_DATA", JSON.stringify(getData));
  }, [getData]);

  const deleteHandler = (key) => {
    firebaseDB.child(`register/${key}`).remove(() =>
      toast.error("Deleted!", {
        position: "top-right",
      })
    );
  };

  const dragStart = (e, position) => {
    dragItem.current = position;
    console.log(e.target.innerHTML);
  };

  const dragEnter = (e, position) => {
    dragOverItem.current = position;
    console.log(e.target.innerHTML);
  };
  const drop = (e) => {
    const copyListItems = [...Object.values(getData)];
    const dragItemContent = copyListItems[dragItem.current];
    copyListItems.splice(dragItem.current, 1);
    copyListItems.splice(dragOverItem.current, 0, dragItemContent);
    dragItem.current = null;
    dragOverItem.current = null;
    setGetData(copyListItems);
  };

  return (
    
      
        Winners
      

      
          {getData &&
            Object.keys(getData).map((key, index) => (
               dragStart(e, index)}
                onDragEnter={(e) => dragEnter(e, index)}
                onDragEnd={drop}
                key={index}
                draggablekey={index}
                draggable
              >
                
                {/* {`https://roohhi.com/convert?name=${(filteredPerson.company.toLowerCase().replace(".",""))}` } */}
              

              //     {index}
              // {getData[key].url}{getData[key].companyname}
            ))}
        
        
          
            S.no
            
              Name ▲▼
            
            
              Company Name
            
            
              LTP
            
            
              %
            
            
              52 W.H
            
            
              52 W.L
            
            M.B
            
              Mkt.Cap
            
            
              Volume
            
            
              Zauba
            
            
              M.C
            
            
              N
            
            
              C.I
            
            
              Del
            
          
        
        {index + 1}

                
                  
                    {getData[key].name}
                  
                
                
                  {" "}
                  
                    {getData[key].companyname}
                  
                
                {getData[key].ltp}
                {getData[key].percent}
                {getData[key].weekhigh}
                {getData[key].weeklow}
                
                  {(getData[key].weekhigh / getData[key].weeklow).toFixed(2)}
                
                {getData[key].mcap}
                {getData[key].volume}

                
                  
                    
                  
                
                
                  
                    
                  
                
                
                  
                    
                  
                
                
                  
                    
                  
                
                
                  
                

      
      
    
  );
}

export default App;

yousoumar · Answer

To have what you want you should first change how you are setting your initial state so that you pick what's in the localStorage if there is any and otherwise set it to null:

const [getData, setGetData] = useState(
  localStorage.getItem("MY_DRAGGED_DATA")
    ? JSON.parse(localStorage.getItem("MY_DRAGGED_DATA"))
    : null
);

And make sure you only use the data from Firebase if the initial data is null (I used null to have a falsy value) and that it's the first render (with loadRef), like so:

const loadRef = useRef(true);
useEffect(() => {
  firebaseDB.child("register").on("value", (details) => {
    if (getData && loadRef.current){
      loadRef.current = false;
      return
    }
    console.log(details.val());
    setGetData(details.val());
  });
}, []); // the linter might ask you to add getData in the dependency array but don't, and you will be fine.

Not able to store data in local storage and use it on page refresh in React

1 Answers