1

Eu preciso de uma lógica que exiba um <Text> dizendo que não há itens quando o produtosArr.filter() fica vazio (ou quando o filtro não me retorna nada).

      <List.Subheader>Vencimento próximo</List.Subheader>
        {this.state.produtosArr.filter(r => {
          const diff = dateDiffInDays(Date.parse(r.data_vencimento.replace(/-/g, "/")), Date.now());
          if (diff >= -7 && diff < 0) {
            return true;
          }
          return false;
        }).map(r => <>
          <List.Item
            title={r.nome_produto}
            description={"Vencimento em " + dateDiffInDays(Date.now(), Date.parse(r.data_vencimento.replace(/-/g, "/"))) + " dias"}
            left={props => <List.Icon {...props} icon="box" />}
          />
        </>)}

Quando o this.state.produtosArr.filter não retorna nada, simplesmente a lista fica vazia, e não quero isso, quero mostrar uma mensagem dizendo que não há itens nessa lista.

Como faço isso?

1 Resposta 1

3

Você já deve saber disso, mas quando a função de filtragem passada ao filter retorna false, o elemento da iteração em questão é simplesmente removido da lista. Desse modo, se nenhum dos itens passa no critério de filtragem, o array final será vazio — já que todos os itens foram removidos.

Desse modo, basta fazer a filtragem fora do retorno da função que renderiza o componente, para que você possa avaliar se o comprimento da lista é maior que zero.

Algo assim:

class MyComponent extends React.Component {
  render() {
    const filtered = this.state.produtosArr.filter((r) => {
      // Sua lógica de filtro.
    });

    if (!filtered.length) {
      return <Text>Não há itens.</Text>;
    }

    return (
      <>
        {filtered.map((r) => {
          // Renderizar cada item normalmente.
        })}
      </>
    );
  }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .