get the value from local storage and update it and then set it again for ex: let data=localStorage.getItem('tasks') //make changes in data localStorage.setItem("tasks", JSON.stringify(tasks));

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

I made this solution, I hope it helps.

  const [todoList, setTodoList] = useState([]);

  // Get todo list from localStorage when the component is mounted
  useEffect(() => {
    setTodoList(JSON.parse(localStorage.getItem('todoList')));
  }, [])

  function updateTodo(todoId, data) {
    const todoIndex = todoList.findIndex(todo => todo.id === todoId);
    // Get a copy of the todo
    let updatableTodo = { ...todoList[todoIndex] };

    // Update the todo here...
    updatableTodo.title = data.title;

    // Update the state and localStorage
    setTodoList(todoList => {
      const newTodoList = [...todoList];
      newTodoList[todoIndex] = updatableTodo;
      localStorage.setItem('todoList', JSON.stringify(newTodoList));
      return newTodoList;
    })
  }

  return (
    <div>
      {todoList.map((todo) => 
        <button onClick={() => updateTodo(todo.id, data)} key={todo.id}>Update</button>
      )}
    </div>
  );