CODEWITHSUNDEEP
reactjs
KYUN
KYUN

Reputation: 177

getitem is returning null in localStorage

I'm trying to set and get item in localStorage. and I have functional state, so I tried to get and set item as a state's key, setitem is working but when i refresh my website localstorage is returning null.

my code is like this :

  const [chart, setChart] = useState([
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
  ]);
  const charts = index => chart[index].key;

  const chartStorageKey = [
    charts(0),
    charts(1),
    charts(2),
    charts(3),
    charts(4),
    charts(5),
    charts(6),
    charts(7),
  ];
  
   useEffect(() => {
    const persistChart = localStorage.getItem("chart");
    JSON.parse(persistChart);
  });

  
  useEffect(() => {
    localStorage.setItem("chart", JSON.stringify(chartStorageKey), [
      chartStorageKey,
    ]);
  });

Upvotes: 0

Views: 226

Answers (4)

pavlovic265
pavlovic265

Reputation: 491

As empty is component you need to add object in this array with key key and value empty component.

 const [chart, setChart] = useState([
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
  ]);

As here you are going throw array and getting key which is null in this case.

const charts = index => chart[index].key;

Here is the link to the playground

Upvotes: 1

p1uton
p1uton

Reputation: 266

Pass an empty array as a second argument in the first useEffect

useEffect(() => {
  const persistChart = localStorage.getItem("chart");
  JSON.parse(persistChart);
}, []);

In the second useEffect [chartStorageKey] should be an argument in useEffect, not in setItem

useEffect(() => {
  localStorage.setItem("chart", JSON.stringify(chartStorageKey));
}, [chartStorageKey]);

Upvotes: 1

sairaj
sairaj

Reputation: 413

UseEffect will be called in every render so add a second argument so that it will be called only when the component is mounted

  const [chart, setChart] = useState([
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
  ]);
  const charts = index => chart[index].key;

  const chartStorageKey = [
    charts(0),
    charts(1),
    charts(2),
    charts(3),
    charts(4),
    charts(5),
    charts(6),
    charts(7),
  ];

 useEffect(() => {
    localStorage.setItem("chart", JSON.stringify(chartStorageKey));
  },[]);
  
 useEffect(() => {
    const persistChart = localStorage.getItem("chart");
    console.log(persistChart)
  }, []);

if you want to change the local storage every time chart state changes then simply pass chart to the dependency array of useEffect

 useEffect(() => {
    localStorage.setItem("chart", JSON.stringify(chartStorageKey));
  },[chart]);
  
 useEffect(() => {
    const persistChart = localStorage.getItem("chart");
    console.log(persistChart)
  }, [chart]);

Upvotes: 1

Snehendu Roy
Snehendu Roy

Reputation: 108

The useEffect sequence is wrong.

the 2nd useEffect should be at the first.

Upvotes: 1

Related Questions