0
183
ViewsHow Can I filter and remove title Categories from array of array?
I have a list separated by alphabetical categories. All that start with the letter A are grouped, letter B are grouped and so on.
When I filter this list, the titles corresponding to each letter do not disappear. The filter is working, but the screen is loaded with the titles of the letters.
When I make the filter, can you tell me how I can remove a letter category that is not being used?
Here's my code I put into codesandbox
Thank you for any help.
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 answers
Answer question0
You could show letter if and even if filter search got result:
So letter visibility becomes:
{letterIsVisible(letter) && <h2>{letter}</h2>}
where letterIsVisible is a function like:
const letterIsVisible = (letter) => {
return (
mapped[letter].filter(
(inputFilter) =>
inputFilter.title.toLowerCase().indexOf(filter.toLowerCase()) >= 0
).length > 0
);
};
Here your codesandbox modified.
·
Juan Pablo Isaza
Report
Answer question