0
190
Visualizações¿Cómo puedo filtrar y eliminar categorías de títulos de una matriz de matrices?
Tengo una lista separada por categorías alfabéticas. Se agrupan todos los que comienzan con la letra A , se agrupan la letra B y así sucesivamente.
Cuando filtro esta lista, los títulos correspondientes a cada letra no desaparecen. El filtro está funcionando, pero la pantalla está cargada con los títulos de las letras.
Cuando hago el filtro, ¿me pueden decir cómo puedo eliminar una categoría de letra que no se está utilizando?
Aquí está mi código que puse en codesandbox
Gracias por cualquier ayuda.
import React from "react"; import "./styles.css"; import { data } from "./data"; export default function App() { const [filter, setFilter] = React.useState(""); const _data = Object.values( data.reduce((c, e) => { if (!c[e.id]) { c[e.id] = e; } return c; }, {}) ); const merged = []; _data.map((arr) => arr.map((item) => merged.push(item))); const mapped = merged.reduce((acc, item) => { const letter = item.title[0].toLowerCase(); if (!acc[letter]) { acc[letter] = []; } acc[letter].push(item); return acc; }, {}); const letters = Object.keys(mapped); return ( <div className="App"> <h1>Grouped by the first initial</h1> <div> <input value={filter} onChange={(e) => setFilter(e.target.value)} /> </div> {letters.map((letter, i) => ( <div key={i}> <h2>{letter}</h2> {mapped[letter] .filter( (inputFilter) => inputFilter.title.toLowerCase().indexOf(filter.toLowerCase()) >= 0 ) .map((item, j) => ( <div key={j}>{item.title}</div> ))} </div> ))} </div> ); }
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Puede mostrar la letra si, e incluso si, la búsqueda de filtro obtuvo un resultado:
Entonces la visibilidad de la letra se convierte en:
{letterIsVisible(letter) && <h2>{letter}</h2>} donde letterIsVisible es una función como:
const letterIsVisible = (letter) => { return ( mapped[letter].filter( (inputFilter) => inputFilter.title.toLowerCase().indexOf(filter.toLowerCase()) >= 0 ).length > 0 ); };Aquí su codesandbox modificado.
·
Juan Pablo Isaza
Relatório
Responde à pergunta