How to change the data stored in LocalStorage when clicking on element in react?

I am creating to-do app in react, and storing the data in localstorage,when user click on particular task it is mark completed, for that purpose i have “complete” boolean property for all task in localStorage.now i want to change that property onclick of that particular task,How to achieve this?.Here is the code link : https://github.com/Khatri-Jinal/react-app/tree/practical4

Answer

I suggest you make a custom hook for local storage (ie. useLocalStorage). This ensures that when you update a value in the local storage, the components that are using the updated value are automatically re-rendered.

You may look it up online or use this youtube viode for your reference. The first example there is useLocalStorage.

EDIT: Your task variable should be an array of object. When rendering the task, pass an id or anything unique to the task on the onclick function (In this example, I’ll just use task name but I advise to create your own).

// tasks hook
const [tasks, setTasks] = useState([
  {desc: 'jog', isComplete: true},
  {desc: 'walk', isComplete: false},
  {desc: 'read', isComplete: true},
]);

// rendering tasks
tasks.map(task => {
  <div key={task.desc} onClick={() => onClickTask(task.desc)}
    task.desc
  </div>
});

And this is your onClickTask function

const onClickTask = (identifier) => {
  const index = tasks.findIndex(task => task.desc === identifier);
  const newTasks = [...tasks];
  newTasks[index].isComplete = true;

  setTasks(newTasks);
};