When I click on inbox component it doesn't show anything in my window

freelance work 0
Viewed 26
import React from 'react';
import './app.css';
import Inbox from "./inbox/inbox";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './nav/navbar';
import Sidebar from './sidebar/sidebar';
import Composer from './composer/composer';

function App(){
  return (
    <> 
      <Router>
        <Navbar/>
        <div className="main-page">
          <Sidebar/>
          <div className="Clicked-Item-Content">
            <Routes>
              <Route path='/inbox'  element={<Inbox />} />
              <Route path='/' element={<Composer />} />
            </Routes>
          </div>
        </div>
      </Router>
    </>
  )
}

export default App;

The button Link part of component

import { NavLink } from "react-router-dom";
import "./sidebar.css";

const Sidebar = () => {
  return (
    <div className="sidebar">
      <ul>
        <li>
          <NavLink to ='/'>
            <i className="fa-solid fa-square-plus box awesome"></i>
            Composer
          </NavLink>
        </li>
        <li>
          <NavLink to ='/inbox'>
            <i className="fa-solid fa-inbox  box awesome"></i>
            Inbox
          </NavLink>
        </li>
      </ul>
    </div>
  )
}

export default Sidebar;

The Inbox component part is below when I click on this it doesn't show anything on screen screen is completely empty, and other link are working fine. My local storage is not empty. I stored an object with key value pair inside an array. When I try to map it doesn't show up on screen, it shows an empty screen.

import { useEffect, useState } from "react";
import "./inbox.css";
 
const Inbox = () => {
  const [localStorageData, setlocalStorageData] = useState([])

  useEffect(() => {
    JSON.parse(localStorage.getItem('todos')).then(data=> setlocalStorageData(data))
    console.log(localStorageData)
    .catch(err=> console.log(err))
  }, [localStorageData])

  return (
    <>
      {localStorageData.length > 0 &&
        localStorageData.map((element, index)=> (
          <div className="inbox" key={index}>
            <div className="bullet">&#x27A3;</div>
            <div className="msg">{element.message}</div>
            <div className="btn-container">
              <div className="date">{element.title}</div>
              <div className="edit btn hide">
                <i className="fa-solid fa-pen-to-square"></i>
              </div>
              <div className="delete btn hide">
                <i className="fa-solid fa-trash"></i>
              </div>
            </div>
          </div>
        )
      )}
    </>
  )
}

export default Inbox;
local-storage react-router-dom reactjs javascript
1 Answers

JSON.parse doesn't return a Promise. You can initialize the localStorageData state directly from localStorage. You also don't want to use any values as a React hook dependency that you are unconditionally enqueueing state updates for as this can lead to render looping if not properly guarded.

Example:

const Inbox = () => {
  const [localStorageData, setlocalStorageData] = useState(
    JSON.parse(localStorage.getItem('todos')) ?? []
  );

  ...

  return (
    <>
      {localStorageData.map((element, index) => (
        <div className="inbox" key={index}>
          <div className="bullet">&#x27A3;</div>
          <div className="msg">{element.message}</div>
          <div className="btn-container">
            <div className="date">{element.title}</div>
            <div className="edit btn hide">
              <i className="fa-solid fa-pen-to-square"></i>
            </div>
            <div className="delete btn hide">
              <i className="fa-solid fa-trash"></i>
            </div>
          </div>
        </div>)
      )}
    </>
  );
};

The code is also using an array index as the React key on the mapped inbox messages. I strongly suggest adding a GUID to the data when it's created that could be used as the key so each inbox message has a static property that uniquely identifies it regardless of where it's rendered.

Drew Reese0
Related