Что здесь подкоректировать чтобы в поисковом фильтре можно было второй раз отфильтровать без перезагрузки страницы?

Question

[ArturPetrov]

У меня есть список имен которые я беру с помощью метода fetch из массива который в свою очередь находится в объекте:

сейчас я стараюсь сделать поисковый фильтр, чтобы при введении какого-то имени и нажатии на кнопку мне отображалась строка только с тем именем.
Когда я ввожу допустим имя Alex и жму на кнопку то все ок:

Но когда я второй раз ввожу другое имя, например Todd и жму на кнопку то у меня не отображается строка Todd:

Проблема решается только перезагрузкой страницы, но мне нужно чтобы без перезагрузки я мог, второй, третий и т.д. раз фильтровать данные.
Как минимально можно подкоректировать мой код чтобы устранить эту ошибку? Просто очень много времени затратил на то чтобы сделать хотя бы такой фильтр, и уже не хочется полностью менять подход к реализации фильтра. Подскажите пожалуйста .
Сама реализация моего фильтра файл App.js - метод searchHandler и также весь файл TableSearch.js.
Вот код в песочнице:
https://codesandbox.io/s/holy-haze-s4549

Answer 1

[Robur]

сделайте два массива - оригинальный ( его не трогайте и не меняете )
и текущий фильрованный - его выводите.
При смене фильтра из оригинального делаете новый фильтрованный

А так вы на первом фильтре удалили все остальные данные и все, адьос - их больше нет и взять неоткуда.

Comments

[Шохрух Шаймардонов]

ArturPetrov, вы видимо не поняли совет. Robur имел ввиду, что когда получили данные сделайте его копию и работайте с ним, а не с оригиналом

[Stockholm Syndrome]

georgich, а php здесь при чём?

ArturPetrov, копия массива создаётся вызовом метода slice без параметров

[Шохрух Шаймардонов]

ArturPetrov, Всмысле. У вас прилетают данные, которые вы наверняка записываете в какую-то переменную. так перед фильтрацией сначала присвойте значение к другой переменной и работайте с ней

Answer 2

[Radiks Alijevs]

https://codesandbox.io/s/exciting-murdock-5m91c - готовый пример. Кешированный объект, с которого происходит фильтр, а стейт просто заполняется отфильтрованным значением