CODEWITHSUNDEEP
reactjs
Dmitry Chernyak
Dmitry Chernyak

Reputation: 305

Delete React items

I have code that outlines all the list items on the page. And each list item has a button to delete it. But after reloading the page, all list items are restored. How to avoid recovery after reboot?

import React, {useState} from "react";

export let List = () => {

let [deletedTasks, setDeletedTasks] = useState([]);
let [tasks, setTasks] = useState([
{ id: 1, title: 'title 1'},
{ id: 2, title: 'title 2'},
{ id: 3, title: 'title 3'}
]

let deleteElements = (id) => {
    const task = tasks.find((e) => e.id === id);
    setDeletedTasks((p) => [...p, task]);
    setTasks((p) => p.filter((e) => e.id !== id));
}

return (<div>
    <div>
        <ul>{tasks.map(el =><li>{el.title}
            <button onClick={() => deleteElements(el.id)}>Delete elements</button>
        </li>)}</ul>
    </div>
</div>)
}

Upvotes: 1

Views: 63

Answers (2)

Abdullah Ghoneim
Abdullah Ghoneim

Reputation: 46

You need to use an REST API to store data (one option you can use is firebase)

Another option while not a recomended solution is to use local storage to persist data and get it after reloading

For example:

let deleteElements = (id) => {
const task = tasks.find((e) => e.id === id);
 setDeletedTasks((p) => {
     localStorage.setItem('deletedFiles'  , JSON.stringify([...p, task])); 
    return [...p, task]
 });
setTasks((p) => p.filter((e) => e.id !== id));
}


useEffect(() => {
const deletedItems = localStorage.getItem('deletedFiles'); 
if(deletedItems){
    setDeletedTasks(JSON.parse(deletedItems))
}
}, [])

Upvotes: 0

Amit Chauhan
Amit Chauhan

Reputation: 6869

you can sync your task with localStorage so even on refreshing your tasks will be preserved.

import React, { useState, useEffect } from "react";

export let List = () => {
  const storedTasks = localStorage.getItem("tasks");
  let [tasks, setTasks] = useState(
    storedTasks || [
      { id: 1, title: "title 1" },
      { id: 2, title: "title 2" },
      { id: 3, title: "title 3" },
    ]
  );

  let deleteElements = (id) => {
    setTasks((p) => p.filter((e) => e.id !== id));
  };

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

  return (
    <div>
      <div>
        <ul>
          {tasks.map((el) => (
            <li>
              {el.title}
              <button onClick={() => deleteElements(el.id)}>
                Delete elements
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

Upvotes: 1

Related Questions