Problems when rendering React component after filter array

Question

Good night, I have a method that filters an array and arrow the state variable "transactions" with the result of this filter = newArrayTransactions, as you can below.

The child component that passes the value to the filter is a text input that I’m using the onChange method on it. The idea is to dynamically render another component that shows all transactions on the screen, based on this filter that is typed. Works well when I type, but when I delete some letter "it seems" that the filter is not executed.

const handleChangeInput = (value) =>{
const newArrayTransactions = transactions.filter(transaction =>{
  return transaction.description.toLowerCase().indexOf(value.toLowerCase())!== -1
})
setTransactions(newArrayTransactions)

Here is the call to the child component by passing the above function

<CreateAndSearch onHandleInput={handleChangeInput}/>

Here is the child component called up

export default function CreateAndSearch({onHandleInput}) {

const handleInput = (e) =>{
    onHandleInput(e.target.value)
}

return (
    <div className='main-createAndSearch'>
        <button className='waves-effect waves-light btn'>
            <i className="material-icons left">add</i>
            NOVO LANÇAMENTO
        </button>
        <div className="input-field">
            <input id="filtro" type="text" onChange={handleInput}/>
            <label hmtlfor="filtro">Filtro</label>
        </div>
    </div>
)

}

Answer 1

The filter method will always filter the array whose method is applied. This never increases its size to the original value, filter at best will return a copy of transactions previous. That is, you need to keep a reference to the original array with all options. Next, a functional example filtering. I used the items as constant, but nothing stops you from spending it as you propose.

import React, { useState } from "react";
import faker from "faker";
import "./styles.css";

const items = Array.from(Array(100).keys()).map(() => ({
  description: faker.commerce.productName(),
  id: faker.random.uuid()
}));

const filterFunction = value => transaction =>
  transaction.description.toLowerCase().indexOf(value.toLowerCase()) !== -1;

function CreateAndSearch({ onHandleInput }) {
  const handleInput = e => {
    onHandleInput(e.target.value);
  };

  return (
    <div className="main-createAndSearch">
      <button className="waves-effect waves-light btn">
        <i className="material-icons left">add</i>
        NOVO LANÇAMENTO
      </button>
      <div className="input-field">
        <input id="filtro" type="text" onChange={handleInput} />
        <label hmtlfor="filtro">Filtro</label>
      </div>
    </div>
  );
}

export default function App() {
  const [transactions, setTransactions] = useState(items);

  const handleChangeInput = value => {
    setTransactions(items.filter(filterFunction(value)));
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <CreateAndSearch onHandleInput={handleChangeInput} />

      <ul>
        {transactions.map(item => (
          <li key={item.id}>{item.description}</li>
        ))}
      </ul>
    </div>
  );
}