• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

514
Vistas
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>
</>
)
}
9 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You can use two ways here,

  1. 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>
</>
)
}
  1. 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>
</>
)
}
9 months ago · Juan Pablo Isaza Denunciar

0

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>
  );
};

9 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.