Boa noite, Tenho um método que filtra um array e seta a variável de estado "transactions" com o resultado deste filter = newArrayTransactions, conforme podem abaixo.
O componente filho que passa o valor para o filter é um input do tipo text que estou usando o método onChange nele. A ideia é renderizar dinamicamente outro componente que mostra todas as transactions na tela, com base nesse filtro que é digitado. Funciona bem quando digito, mas quando deleto alguma letra "parece" que o filter não é executado.
const handleChangeInput = (value) =>{
const newArrayTransactions = transactions.filter(transaction =>{
return transaction.description.toLowerCase().indexOf(value.toLowerCase())!== -1
})
setTransactions(newArrayTransactions)
Aqui esta a chamado ao componente filho passando a função acima
<CreateAndSearch onHandleInput={handleChangeInput}/>
Aqui esta o componente filho chamado acima
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>
)
}