Primeiramente achei a solução muito boa, então parabéns. Agora uma pequena correção.
Nessa linha recomendo mudar a arbodagem. Ao invés do código orignal, como está abaixo
return (item === null ? "" : item.toString().includes(event.target.value.toString()));
Utilizar essa implementação
return (item === null ? "" : item.toString() === event.target.value.toString());
Explico o motivo da mudança. O .include() vai verificar se determinado valor existe em um array, nesse caso digamos que a gente tivesse o seguinte array
const array = [
{
nome: "Nathally",
idade: 21
},
{
nome: "Nathalia",
idade: 23
},
{
nome: "Nath",
idade: 35
}
]
Neste caso, se você usar o código original e buscar somente por "Nath" ele retornará os 3 elementos, pois vai considerar que a string "Nath" existe na propriedade nome dos 3 objetos, o que é verdade. Então para evitar esse "erro", boto entre aspas pois não entendi se esse comportamento é esperado ou não, com a sugestão de correção ele retornará apenas o elemento que de fato apresenta a propriedade nome com o valor "Nath".
O código final sugerido fica assim
const Filter = (event) => {
return arr.filter(obj => {
return Object.values(obj).map(item => {
return (item === null ? "" : item.toString() === event.target.value.toString());
}).includes(true);
});
}
Espero que ajude :)