Question

0

497

Views

React JS - How to page refresh after delete data from the localstorage?

Hello I need help how to refresh page when delete data from localstorage in React JS. I checked data is deleted from console but in page after manually refresh the page delete is deleted I hope understand my problem.

Here is my delete code

const Posts = () => {

const temp = JSON.parse(localStorage.getItem("Name","Image") || "[]");

const deleteItem = (index) =>{
    localStorage.removeItem("Name");
    localStorage.removeItem("Image");
}

return (
  <>
    <div className='post-data'>
      <div className='post-data-content'>
         {
            temp.map((val,index)=>{
               return(
                    <>
                      <div className='posts-data' key={index}>
                        <button type='button' className="delete-post" onClick={deleteItem}>x</button>
                          <img src={val.image} alt={val.image}/>
                             <h3>{val.name}</h3>
                                </div>
                                </>
                            )
                       })
                   }
                </div>
            </div> 
    </div>
</>
)
}

7 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T19:50:31.126Z

You can use two ways here,

If you want to refresh the page only then you can use window.location.reload();.


const Posts = () => {

const temp = JSON.parse(localStorage.getItem("Name","Image") || "[]");

const deleteItem = (index) =>{
    localStorage.removeItem("Name");
    localStorage.removeItem("Image");
    window.location.reload(); //like here
}

return (
  <>
    <div className='post-data'>
      <div className='post-data-content'>
         {
            temp.map((val,index)=>{
               return(
                    <>
                      <div className='posts-data' key={index}>
                        <button type='button' className="delete-post" onClick={deleteItem}>x</button>
                          <img src={val.image} alt={val.image}/>
                             <h3>{val.name}</h3>
                                </div>
                                </>
                            )
                       })
                   }
                </div>
            </div> 
    </div>
</>
)
}

If you want to go to any endpoint like /login, then you can use 'useNavigate()` hook like this

import { useNavigate } from 'react-route-dom';

const Posts = () => {

const navigate = useNavigate();

const temp = JSON.parse(localStorage.getItem("Name","Image") || "[]");

const deleteItem = (index) =>{
    localStorage.removeItem("Name");
    localStorage.removeItem("Image");
    navigate('/login'); //like here
}

return (
  <>
    <div className='post-data'>
      <div className='post-data-content'>
         {
            temp.map((val,index)=>{
               return(
                    <>
                      <div className='posts-data' key={index}>
                        <button type='button' className="delete-post" onClick={deleteItem}>x</button>
                          <img src={val.image} alt={val.image}/>
                             <h3>{val.name}</h3>
                                </div>
                                </>
                            )
                       })
                   }
                </div>
            </div> 
    </div>
</>
)
}

Answer 2 · 2022-07-03T19:50:31.274Z

You can get the initial data from local storage and store it in component state. When an item is deleted from the state it will re-render the component and when it's state changes you can store the updated state in the local storage.

// const temp = JSON.parse(localStorage.getItem('Name', 'Image') || '[]');
const temp = JSON.parse(localStorage.getItem('Name') || '[]');

const Posts = () => {
  const [state, setState] = React.useState(temp);

  const deleteItem = removeindex => {
    // localStorage.removeItem('Name');
    // localStorage.removeItem('Image');

    setState(s => s.filter((_, index) => index !== removeindex));
  };

  React.useEffect(() => {
    localStorage.setItem('Name', JSON.stringify(state));
  }, [state]);

  return (
    <div className="post-data">
      <div className="post-data-content">
        {temp.map((val, index) => (
          <div className="posts-data" key={index}>
            <button type="button" className="delete-post" onClick={() => deleteItem(index)}>
              x
            </button>
            <img src={val.image} alt={val.image} />
            <h3>{val.name}</h3>
          </div>
        ))}
      </div>
    </div>
  );
};