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>
</>
)
}
You can use two ways here,
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>
</>
)
}
/login
, then you can use 'useNavigate()` hook like thisimport { 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>
</>
)
}
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>
);
};