Как удалять элементы массива при клике пока массив не будет пуст?

Question

[Speakermen]

Пишу todo list при клике удаляется один элемент массива

[
  { id: 1, value: "value1" }, 
  { id: 2, value: "value2" },
]

//или 

[
  { id: 1, value: "value1" }, 
  { id: 3, value: "value3" },
]

По идее при каждом клике элементы должны удалятся пока он не будет пустым

console.log(remove(1)); //при клике отрабатывает только одна функция но не запоминает удаленный элемент
console.log(remove(2));
console.log(remove(3)); //он уже должен был быть пустой

function useState(defaultValue) {
  let currentState = defaultValue;

  function stateSetter(value) {
    currentState = value;
    return currentState;
  }

  return [currentState, stateSetter];
}

const [state, setState] = useState([
  { id: 1, value: "value1" },
  { id: 2, value: "value2" },
  { id: 3, value: "value3" },
]);

function remove(id) {
  const idx = state.find((x) => x.id == id);
  const index = state.findIndex((x) => x == idx);
  state.splice(index, 1);
  //return state.map((x) => x).filter((x) => x.id != id);
  //return idx.id;
  return setState(state);
}

//console.log(state, setState(remove(1)));
//console.log(state, setState(remove(2)));
console.log(remove(1));
console.log(remove(2));
console.log(remove(3));
console.log(state);

Comments

[Kentavr16]

что-то ничего не понятно. Ты хочешь получить в итоге два массива - один исходный и второй изменяемый.

console.log(remove(1)); //при клике отрабатывает только одна функция но не запоминает удаленный элемент

Сколько должно срабатывать и куда должен запоминаться удаляемый элемент?

Eсть массив но при первом клике удаляется только один элемент при втором тоже
Попробовал сделать что то похожее но функция вызывается 3, а не один раз(

Сколько должно удаляться за один клик?
Другими словами - четко опиши чего ты хочешь добиться, и будет тебе счастье.

[Speakermen]

Kentavr16, при клике должен удалится один элемент массива и так пока он не будет пустой.

один исходный и второй изменяемый думаю что я ошибся сорян должен быть один массив

заметил что эта штука работает не верно setCount() не меняет count)

function useState(defaultValue) {
  let currentState = defaultValue;

  function stateSetter(value) {
    //console.log(value);
    currentState = value;
    return currentState;
  }

  return [currentState, stateSetter];
}

const [count, setCount] = useState(0);

setCount(count + 1);

console.log(count);

todo list пишу

findAll
findOne
create
update
remove

[Kentavr16]

Speakermen, и не должна меняться.

function useState(defaultValue) {
  let currentState = { value: defaultValue };

  function stateSetter(value) {
    currentState.value = value;
    return currentState.value;
  }

  return [currentState, stateSetter];
}

const [countState, setCount] = useState(0);

setCount(countState.value + 1);

console.log(countState.value);

так будет работать. В твоем варианте count это определенное значение, которое не обновляется. В моем варианте это объект, который как часто говорят работает по принципу "ссылки" на область памяти. Короче, кто понял тот понял, как говорится.

Ты "переписываешь" реакт вручную, что ли?

[Speakermen]

Kentavr16, я заказал книги Симпсона Кайла Вы не знаете JS там норм описано вроде про ссылки и значения и Поднятие (hoisting). Некоторые фрагменты кода интересны (реальный, виртуальный DOM, BOM, маршрутизация, DDD (controller->dto->service), ну и парсинг html и преобразование dom element) ну и redux и понятия (state machine)

[Kentavr16]

Speakermen, просто в твоём коде есть попытка реализовать функциональность библиотеки react "своими" методами (useState). Упражнение может и Окей если хочешь понять работу реакт. В ином случае если ты просто учишь основы javascript логичнее пройтись основательно по замыканиям в джаваскрипт, без изощрений.