Tengo un componente SideBar que tiene un subcomponente llamado SideBarLink que dirige a la página correcta.
Estoy tratando de agregar la funcionalidad de búsqueda a mi barra lateral con un campo de texto.
Agregué una entrada de texto al componente SideBar y estoy tratando de averiguar la mejor manera de ocultar los componentes SideBarLink en función de la coincidencia entre el texto de búsqueda y el accesorio de texto de SideBarLink.
Este es mi diseño actual para la barra lateral, pero se siente feo declarar el evento oculto en cada SideBarLink cuando ya conocemos el accesorio de texto (especialmente cuando empiezo a agregar muchos más enlaces).
import "./SideBar.css"; import React, { useState } from "react"; import SideBarDropdown from "./SideBarDropdown"; import SideBarLink from "./SideBarLink"; import { TextInput } from "../Input"; const SideBar: React.FC = () => { const [searchPhrase, setSearchPhrase] = useState<string>(); const acroynym = (str: string) => str .split(/\s/) .reduce((response, word) => (response += word.slice(0, 1)), ""); const match = (text: string) => searchPhrase ? text.toLowerCase().includes(searchPhrase?.toLowerCase()) || acroynym(text).toLowerCase().includes(searchPhrase?.toLowerCase()) : true; return ( <nav id="sidebar" className="custom_scrollbar"> <ul className="list-unstyled components"> <TextInput value={searchPhrase} onChange={(value: string) => setSearchPhrase(value!)} /> <SideBarLink to={`${urls.accounts}`} text="Account" icon="fas fa-plus-square" hidden={!match("Account")} /> <SideBarLink to={`${urls.customers}`} text="Customer" icon="fas fa-plus-square" hidden={!match("Customer")} /> <SideBarLink to={`${urls.orders}`} text="Order" icon="fas fa-plus-square" hidden={!match("Order")} /> </ul> </nav> ); }; export default SideBar;¿Es este el mejor enfoque para actualizar todos los componentes secundarios?
Si desea una forma rápida y sucia, simplemente pase el texto de búsqueda a SideBarLink y declare su función isMatch allí (también debe considerar memorizar su función para que no se vuelva a declarar después de cada procesamiento)
Pero no me gusta este enfoque, porque su SideBarLink que se muestra o no, no tiene nada que ver con el propio SideBarLink. es parte de la lógica de representación en el componente de la barra lateral, por lo que debe permanecer allí. para hacer eso, simplemente defina todos sus enlaces en una matriz y simplemente mapee sobre ellos. como esto:
const links = useMemo(() => [ { text: 'Account', to: `${urls.accounts}`, icon: 'fas fa-plus-square' }, { text: 'Customer', to: `${urls.customers}`, icon: 'fas fa-plus-square' }, ], []);luego en su bucle de renderizado sobre la matriz:
{links.map(({ text, to, icon }) => ( <SideBarLink text="Customer" to={`${urls.customers}`} icon="fas fa-plus-square" isMatch={isMatch(text)} /> ))}Además, no olvide memorizar su función isMatch:
const isMatch = useCallback( (text: string) => searchPhrase ? text.toLowerCase().includes(searchPhrase?.toLowerCase()) || acroynym(text).toLowerCase().includes(searchPhrase?.toLowerCase()) : true, [searchPhrase], );